Jump to content

How to edit hover state on tertiary button

Go to solution Solved by KwameAndCo,

Recommended Posts

Site: https://gracelillianlee.squarespace.com/

My site password is: Tr0pic@l

Hello, I am trying to remove the hover state on my tertiary button, I have tried a few different code snippets and editing the colours to not make my tertiary button have a hover state but I have not been able to remove it. As my tertiary button has no fill and is just an underline button the hover state looks wrong and I would prefer to either create a hover state that simply changes the underline colour and text colour or none at all. I like the hover states on all my other buttons so I am only trying to remove it from my tertiary (small) button. Any ideas? thanks in advance 😊

Button normally

tertiary.button.png.b342f07e5c9bd93e7cbf24f90ffdf789.png

 

Button on hover

tertiary.button.onhover.png.c2df6b13e60b0ddd1c4ccf51b4086a8d.png

 

Link to comment
  • Solution

There is a ::before pseudo element being affected by the hover state:

.tweak-global-animations-animation-type-flex .sqs-button-element--primary:not(input):hover::before, .tweak-global-animations-animation-type-flex .sqs-button-element--secondary:not(input):hover::before, .tweak-global-animations-animation-type-flex .sqs-button-element--tertiary:not(input):hover::before {
  clip-path: polygon(-2% -2%,102% -2%,102% 102%,-2% 102%);
}

To achieve your desired result you can just hide it and then apply your underline styling as normal

.sqs-block-button-element--small.sqs-button-element--tertiary.sqs-block-button-element::before {
  display: none;
}

You might need !important.

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment

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.