Zurb 基金会 - 从按钮中删除背景颜色？

Question

如何从 Zurb Foundation 中删除按钮的背景颜色？

<button class="button button-arrow">Button <i class="icon-arrow-right">&rarr;</i></button>

CSS/减去：

.button-arrow {
    background-color: none;
    color: black;
    font-size: @text-font-size;
    text-decoration: underline;
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;

    &:hover {
        background-color: none;
        color: @colour-dark;
    }
}

明显不行。有什么想法吗？

Answer 1

您需要更新.button class:

.button {
   background-color: transparent;
}

确保您的 Foundation 覆盖在加载 Foundation 样式后加载的样式表中，以便您可以使用特异性来覆盖它们。

The Foundation docs also talk about using SASS to edit the default variables controlling button styles:

The default styles of this component can be customized using these Sass variables in your project's settings file.

$button-background

Answer 2

将其更改为：initial，这是背景色的默认值属性

Zurb 基金会 - 从按钮中删除背景颜色？

Zurb foundation - remove the background colour from buttons?

css

zurb-foundation

zurb-foundation-6