Hover over button color
-
Hi! I’m looking for help with changing my hover-over-button color on my paid wordpress website (not launched yet). Actually, I’d like to try a few different colors and see what they look like.
Could someone explain how this is done? And if I need to do something particular (e.g. publish my website, wait a couple hours, etc.) to see the changes applied? Thank you!
-
Hi there!
You can change the hover color by using custom CSS code, which is allowed on your Premium plan. The CSS code needs to be very specific, so you’ll need to figure out two things: 1. Which button you want this effect on; 2. Which color you want.
You can copy the following CSS code and paste it into My Site → Appearance → Customize → Additional CSS and click Save Changes. This will affect all button’s hover color and change the button color to
graywhen hovering./* Change all button background color */ .wp-block-button a:hover { background-color:gray; }You can try out different colors by changing the word
grayto another color or using an HTML color code. To choose an HTML color code, you can go to https://htmlcolorcodes.com → pick a color, copy the HEX code value (starting with the # sign), and paste it into the CSS code above (replacing the color namegray).Please give it a try and let us know if you need further help. :)
-
Hello, and thank you!! That’s so cool! :)
So far I have one button that has a different background color (made to stand out, as it’s a call to action). Is there a way to change the hover color on this button, too? When I preview it, there is no hover color — not even the default one.
-
Hi @julieisrael, sure:
- Add a class name to the block using these instructions. Call it standout or some other class name of your choosing.
- Add this CSS. You will want to change the color of course. If you give it some other class name, use that word instead of standout.
/* Set a special hover color */ .wp-block-button.standout a:hover { background-color: pink; }And, since this is a class, anytime you need a special button on your site, you can add the standout (or yourownclassname) class to it, too.
Hoping this helps!
-
Thank you supernovia! I didn’t even know one could do that, very cool.
I can only get the hover color to show up when I clear the custom background color of the button. Is there a way I can keep the special background color and still see the hover color?
-
Hi there, are you able to set a color for your button so we can see this issue in action? It will help us to troubleshoot, and I did not see the button doing this when I checked your site recently.
This will also help us to see what color you are trying to set for your button in the event that it will need to be set via CSS. Thanks!
-
Hi staff-totoro! The site I need help with should be live now. It is the homepage of my new website (not a .wordpress address), and the button I’m trying to change the hover color for is the one that says “sign up for release news.” Let me know if you still can’t see it! Thank you for your help.
-
Hi there,
I am not able to see the hover color. To be sure I’ve understood, you want the default appearance of the button (without clicking or hovering) to be white, and upon hover you want the color of the button to be pink, yes?
Thanks for confirming.
-
Thanks for your help here! Yes, I’d like the “sign up for release news” button to keep the white background color I’ve set to distinguish it (but just that button, no others); for the hover color, I’m just trying to get it to show. Pink or the hex green I’ve set are both great; based on this thread so far I feel well equipped to be able to change the color later, if I can just get it to show, haha. Thank you!
-
Got it – so when you set a special background color the hover stops working? Let’s try this then:
.wp-block-button.standout a:hover { background-color: pink; } .wp-block-button.standout a { background-color: white; color: black; }Again, be sure to use your real class name. Let us know if that does the trick!
-
Dang it…I must’ve applied the class in the wrong place, because now all of my buttons are white, and deleting the CSS changes didn’t fix it. Can you help me make sure I’m applying it in the right place (to affect one button only)?
-
(I was able to return all the other buttons to black by using a history setting, but still wonder about the single-button application. Thanks for your patience helping me figure this out. :))
-
Okay! I did some digging. Apparently code that uses the qualifier “!important” can override default code that would otherwise block the hover color.
Using user Rafy a11n (@nawaz0750)’s solution found elsewhere in this support forum, I was able to successfully get the custom hover color to show on all but one of my website’s buttons.
The only button I still need help getting the *correct* hover color on (my custom color is #189374) is the “send” button on my Contact page. Can anyone offer advice on this? Thank you again, you have all been troopers with my saga of questions.
-
@julieisrael can you share the code you used, and the class name you used? We’ll have a look. In my example, “standout” was the class name you added, but I’m not seeing any special classes added to that button currently. Thanks in advance!
-
I was having some trouble with the class-related changes, so I ended deleting.
I’m getting an error message when I try to post the codes themselves here, but what did end up working for most of the buttons is linked above (Rafy a11n’s solution), and I was able to change the hover color of the “send” button on the contact form using this code from slantedplanet.
Thank you again for the support. Marking as resolved :)
-
Perfect. That works too for changing the hover color overall. Let us know if you need more help!
- The topic ‘Hover over button color’ is closed to new replies.
WordPress.com Forums 