Clever Geek Handbook

Change Button and Fade Effect Color with Zurb Foundation

I am using the Zurb Foundation and my question is pretty straight forward, how do I change the color of a button like this one, <a href="#" class="button [radius round]">Text</a>

Now I know there is a way to change the background color by doing this, <a href="#" class="button [radius round]" style="background-color: #3871be">Button Text</a>

but when I do that I lose the fade effect to a darker color when I hover over the button, how do I get the dark color effect fade out?

Next to the Zurb buttons

+3


source to share


1 answer


ok, answering my own question here, put this in my css

.button.custom {
    background-color: #88643d;
}
.button.custom:hover,
.button.custom:focus {
    background-color: #6d5031;
}


This did the trick :)

+5


source






More articles:


All Articles