How do I change the color of a button block on hover?

I added a black button block with white text on one of my pages but I want it to change to blue box with white text on hover? How do I do this?

Thanks!

It would help to have a link to your website. If you can update your question with the link we would be able to better help.

my site is still being built and I'd rather not share the link yet. the button is a very straightforward "LEARN MORE" button that i created using the Button Block feature. It's a black button with white text in it that will link to some of my other work. I want it to change to blue with white text when someone hovers over it. I cannot for the life of me figure this out. help!

Part of the issue is that there are several different variables for types of buttons - working with CSS is working with more than just the color variables. We are really just shooting in the dark if we have limited information. People can send various code they've used, but it may not be applicable to your specific scenario. Just an FYI - You can always edit or delete the comment to remove your website after help has been offered.

Try this:

put it in the Custom CCS and got a "syntax error". hmmm. any other ideas?

oh, and i see you have these buttons all over your site - how did you do it? I'm desperate!!

thanks,Ryan

This should work for you. This will target the button you requested, and any other of the "Small" buttons if you put it into the "Custom CSS" in Style Editor. If you want to just target the button on the page, place it between in the Page Header Code Injection.

.small-button-shape-pill .sqs-block-button .sqs-block-button-element--small:hover {
 background-color: #0000ff !important;
 color: #fff !important
}

it worked it worked it worked !!!!!

thank you thank you!!!!

No problem!

Hello, I too am having trouble with changing the hover over colour of a button. I am using a small square button with the outline setting. I have tried to use the CS code that was posted before but failed.

As this is a ghost button I would like just the button text and outline to change colour when hovered over and for the whole button to not fill with colour. Can anyone help me please?

The site is under construction still but here is the linkhttp://www.joshuajake.co.uk/home/

@chco is there a way to target the call-to-action button on the banner section? :)

If you use a small square button with rounded corners, you can use this code:

.small-button-style-outline .sqs-block-button .sqs-block-button-element--small:hover {
  background-color: #0000ff !important;
  color: #fff !important
}

It will depend on the type of button used on the site. You can check the class by Inspecting the element.

If you have the Button Block's color set to blue already in the Style Editor you can just use this to make the text white on hover instead of black as well:

.sqs-block-button .sqs-block-button-element--medium:hover {
  color: #fff !important
}

Paste that in the CSS Editor. Change the ".sqs-block-button-element--medium:hover" to 'small' or 'large' instead of 'medium' depending on the size you set within the Button Block settings.