Jump to content

Changing the hover state of a button

Go to solution Solved by tuanphan,

Recommended Posts

Posted (edited)

Hi,

I'd like to change the hover state of the primary buttons on my site so that the hover state is more obvious.

At the moment the button is dark grey with white text. When hovering on it, the background turns slightly less grey.

I'd like it to be more obvious — either underlining the text or turning to a white background with black text. 

Does anyone know an easy way to make either of these changes?

Thank you

Website: https://www.zoehough.com/

 

Edited by ae_1
Posted (edited)

Hi @tuanphan Thank you for sharing, but this code does not work for me. I have edited the borderradius for the buttons in my style editor. But somehow the hoverstate does not change accordingly and It seams unresponsive targeting it with custom css.   
 

I have tried  the code you suggested. 

div.button-block a.sqs-block-button-element:hover {
    background-color: #fff !important;
    color: #000 !important;
    opacity: 1 !important;
}

Also inspecting and searching for the correct class in chrome and using below values in the above codeblock. 

.sqs-block-button-element 
.medium sqs-button-element 
.primary sqs-block-button-element

Below are some example from how the buttons now look in default state and with hover in white. 

https://www.lizanbloomcoaching.nl/
P: zelfliefde

Do you have any other suggestions?

image.thumb.png.ad53fc5ea2bf1d43eda793a86d37f269.pngimage.png.60fd825745d1c4ba2918c661e2413876.png

Edited by Lizan
Posted

Thank you so much @tuanphan really appreciate your reply 🙂

That worked, and I added an extra line to give the hover-state button a black border

div.button-block a.sqs-block-button-element:hover {
    background-color: #fff !important;
    color: #000 !important;
    border: 2px solid black;
    opacity: 1 !important;
}

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.