Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
veegman

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

Question

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!

Edited by sabri
retag

Share this post


Link to post

13 answers to this question

Recommended Posts

  • 0

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!

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

Try this:


Australian based web design and development specialists at Going Square

Going Square are a web design and online marketing studio who are dedicated to the delivery of clean and functional sites for individuals, small businesses and organisations. We are focused on custom Squarespace Design and Development and supporting platforms such as Stripe, MailChimp, Facebook and Twitter.

We also provide all the knowledge and training you need to succeed with your new Squarespace website from written and video training to knowledge articles and much more.

Share this post


Link to post
  • 2

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
}

Share this post


Link to post
  • 0
Guest

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/

Share this post


Link to post
  • 0

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


Freelance graphic design, with a pretty basic understanding of code, but a craving for things to look pretty and work perfectly. This gets me in trouble! Visit my website to get in contact: www.januarymade.co.nz :)

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...