veegman 12 Share Posted May 31, 2015 (edited) 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 September 2, 2016 by sabri retag Scoobie 1 Link to post
2 chco 1,588 Share Posted June 1, 2015 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 post
0 chco 1,588 Share Posted May 31, 2015 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. Link to post
0 veegman 12 Author Share Posted May 31, 2015 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 post
0 chco 1,588 Share Posted June 1, 2015 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 post
0 Going Square 0 Share Posted June 1, 2015 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. Link to post
0 veegman 12 Author Share Posted June 1, 2015 put it in the Custom CCS and got a "syntax error". hmmm. any other ideas? Link to post
0 veegman 12 Author Share Posted June 1, 2015 oh, and i see you have these buttons all over your site - how did you do it? I'm desperate!! thanks,Ryan Link to post
0 veegman 12 Author Share Posted June 1, 2015 it worked it worked it worked !!!!! thank you thank you!!!! Link to post
0 Guest Share Posted June 23, 2015 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 post
0 JanuaryMade1570048198 0 Share Posted June 23, 2016 @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 :) Link to post
0 jcuvdb 440 Share Posted October 28, 2016 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 post
0 iamme123 2 Share Posted March 11, 2017 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 post
Question
veegman 12
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 sabriretag
Link to post
Top Posters For This Question
5
4
1
Popular Days
Jun 1
7
May 31
3
Oct 28
1
Mar 11
1
Top Posters For This Question
veegman 5 posts
chco 4 posts
Going Square 1 post
Popular Days
Jun 1 2015
7 posts
May 31 2015
3 posts
Oct 28 2016
1 post
Mar 11 2017
1 post
13 answers to this question
Recommended Posts