Jump to content

Hover effect not working for all elements in the same CSS code... 🙃

Recommended Posts

Site URL: https://hen-jaguar-t9ny.squarespace.com/

Hello ! I'm trying to create a hover effect on buttons. 

Weirdly, it works on one element in the list (the card image button) but not the newsletter button nor the classic medium button... This is what I added in the CSS panel :

.sqs-block-button-element--medium, .newsletter-block .newsletter-form-button, .sqs-block-image .design-layout-card .image-button a {
  box-shadow: 6px 6px #D66BA0;
  transition: all ease-in .05s;}

.newsletter-block .newsletter-form-button a:hover, .sqs-block-image .design-layout-card .image-button a:hover, .sqs-block-button-element--medium a:hover {
  box-shadow: none;
  transform: translateY(4px) !important;
  transition: all ease-in .05s;}


The box shadow is working nicely. But no hover effect on the medium button or the newsletter button...

Does the above CSS code look correct to you guys ? If not, could you please point out what to change ?


Thank you so much for your help !


Link to comment
  • Replies 1
  • Views 126
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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.