Jump to content

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

Recommended Posts

  • Replies 13
  • Views 25.9k
  • Created
  • Last Reply

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!

Link to comment

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.

Link to comment

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
}

Link to comment
  • 4 weeks later...

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/

Link to comment
  • 1 year later...
  • 4 months later...

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.

Link to comment
  • 4 months later...
Guest iamme123

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.

Link to comment

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.