Button Font Color On Hover

modus · May 2016

How do I change the font color of a button when I hover over it?

It turns from black to white text now.

There are buttons on this page as an example.

http://165.31e.myftpupload.com

Thanks.

Albert · May 2016

To change hover text color, you need to use an extra css:

.button-stroke a.button:hover, .button-stroke a.tp-button:hover { color: #000 !important; }

modus · May 2016

Perfect!

Albert · May 2016

You are welcome

modus · May 2016

Hmm. It seems to be working on some buttons but not the ones I'm using on the contact page and in the footer.

http://165.31e.myftpupload.com/contact/

modus · May 2016

Also, is there a way to remove the border for the footer button only?

Thanks!

Albert · May 2016

To change the color of those stroke buttons, you need to use the following css:

.button-stroke a.button.button_theme:not(.action_button), .button-stroke a.button.button_theme:not(.action_button), .button-stroke a.button.button_theme .button_icon i, .button-stroke a.tp-button.button_theme, .button-stroke button, .button-stroke input[type="submit"], .button-stroke input[type="reset"], .button-stroke input[type="button"] {
    border-color: #ff0000 !important;
    color: #ff0000 !important;
}

.button-stroke a.button.button_theme:hover, .button-stroke a.tp-button.button_theme:hover, .button-stroke button:hover, .button-stroke input[type="submit"]:hover, .button-stroke input[type="reset"]:hover, .button-stroke input[type="button"]:hover {
    background-color: #0000ff !important;
    color: #0000ff !important;
}

modus · May 2016

You guys are amazing!

Thanks!

Albert · May 2016

You are welcome

ArnaudChougny · January 2017

Hello Muffingroup!
Same kind of problem, do you have any idea how can i change the color of a form button (normal and hover) situated in the footer? I would like it to be white when not hover, and gold on hover.
To be more precise, the "subscribe" button in the footer (bottom right) of this page : http://www.marcus-imports.com/wordpress/
Thanks!

Albert · January 2017

@ArnaudChougny To change signup button on your site, please use:

#mc_embed_signup .button { background: #000 !important; color: #FFF !important; }
#mc_embed_signup .button:hover { background: #FFF !important; color: #000 !important; }

ArnaudChougny · January 2017

Thanks, where shall i place this code?
I tried under Appearance > Custom CSS & JS > CSS but it doesnt work

Albert · January 2017

Above section is the right place for custom css. We checked and css works so please move it into 1st line of Custom CSS section because we are pretty sure you have bugs in that section and that's why any css under the bug place, does not work.

ArnaudChougny · January 2017

Great! Works perfectly now !

Albert · January 2017

You are welcome!

Button Font Color On Hover

Comments