veegman Posted May 31, 2015 Share Posted May 31, 2015 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! Link to comment
chco Posted May 31, 2015 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 comment
veegman Posted May 31, 2015 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 comment
chco Posted June 1, 2015 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 comment
veegman Posted June 1, 2015 Author Share Posted June 1, 2015 put it in the Custom CCS and got a "syntax error". hmmm. any other ideas? Link to comment
veegman Posted June 1, 2015 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 comment
chco Posted June 1, 2015 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 comment
veegman Posted June 1, 2015 Author Share Posted June 1, 2015 it worked it worked it worked !!!!! thank you thank you!!!! Link to comment
Guest Posted June 23, 2015 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 comment
JanuaryMade1570048198 Posted June 23, 2016 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 comment
Guest Posted October 28, 2016 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 comment
Guest iamme123 Posted March 11, 2017 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 comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.