CODEWITHSUNDEEP
csszurb-foundationzurb-foundation-6
Run
Run

Reputation: 57176

Zurb foundation - remove the background colour from buttons?

How do I remove the background colour from buttons in Zurb Foundation? 

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

CSS/ LESS:

.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;
    }
}

Does not work obviously. Any ideas?

Upvotes: 1

Views: 431

Answers (2)

Nathaniel Flick
Nathaniel Flick

Reputation: 2963

You need to update the .button class:

.button {
   background-color: transparent;
}

Make sure your Foundation overrides are in a stylesheet loaded AFTER Foundation styles are loaded so you can use specificity to override them.

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

Upvotes: 0

MultiDutch
MultiDutch

Reputation: 34

change it to : initial, this is the default value of the background-color property

Upvotes: 1

Related Questions