Menu icon Foundation
How to change the color of a button

Hello, 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>

button

Hello, 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>

This post has been closed. No new replies can be added.

Thomas H over 5 years ago

This question was kind of answered here, http://foundation.zurb.com/forum/posts/2220-scss---how-to-edit-button-background-color, but when I do this, I loose the fade effect to a darker color when I hover over the button, how do I get the darker color fade effect back?
http://s11.postimg.org/41jg6c46r/image.jpg

Thomas H over 5 years ago

This question was kind of answered here, http://foundation.zurb.com/forum/posts/2220-scss---how-to-edit-button-background-color, but when I do this, I loose the fade effect to a darker color when I hover over the button, how do I get the darker color fade effect back?
http://s11.postimg.org/41jg6c46r/image.jpg

Lee Honeycutt over 5 years ago

Thomas,

I've found the same thing. I use a WordPress theme that supports Foundation 5, so I don't change the Foundation SASS directly.

When I override button color in child theme SASS, the hover state fade effect is lost. But you can easily gain it back with something like this:

.button:hover, 
.button:focus {
  background-color: darken($buttoncolor, 5%);
}

-- Lee

Thomas H over 5 years ago

Thank you for your reply, how do insert that in this?

<a href="#" class="button [radius round]">Text</a>

Rafi Benkual over 5 years ago

Thomas - Lee is correct

the HTML you posted above used premade classes to change colors.

You add the classes without the brackets:

<a href="#" class="button radius">Text</a>

Other classes you can use for color are:
secondary - grey
alert - red
success - green

To make a custom button, create a custom class like:

<a href="#" class="button custom">Text</a>

Then in your css:
```
.button.custom {
background-color: #999;
}

.button.custom:hover,
.button.custom:focus {
background-color: darken($buttoncolor, 5%);
}

Thomas H over 5 years ago

Hello Rafi Benkual, I tried to add this into my css and the button color is changed, but not darkened when hover over, here is a link: http://onlineth.yzi.me/home/

Rafi Benkual over 5 years ago

You are missing the custom class in your css selector:

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

Thomas H over 5 years ago

Thank you!!!! (It worked)