Spinning Button Hover Effect On Squarespace

Abi Bacon

Squarespace Developer based in Southampton, UK

Elevate your website's charm with interactive and playful hover effects for buttons. Adding a touch of uniqueness and fun to your user interface can make your site stand out. In this guide, I'll show you how to effortlessly implement engaging hover effects that add a dynamic and lively flair to your web buttons, making the user experience both interactive and memorable.

Step 1: Add A Button To Your Site

First of all you’ll need to use a Button Block to add the Button that you’d like to add this effect to. You can choose between the Primary, Secondary and Tertiary styles.

Step 2: TargeTing Your ButtonS

Next, navigate to the Custom CSS area (Website > Website Tools > Custom CSS).

We need to target the Button we’d like to make spin, below I’ve included the targets for each button style and how to target an individual button using its Block ID.

Target By Block Id

#block-id .sqs-block-button-container {

}

All Primary Buttons

.button-block .sqs-button-element--primary {
  
}

All Secondary Buttons

.button-block .btn.sqs-button-element--secondary {

}

All Tertiary Buttons

.button-block .btn.sqs-button-element--tertiary {

}

Step 3 - :hover pSeudo Class

I’m going to choose to target all Primary style buttons on my site.

Then I will want to use the :hover psuedo class to only target the button when the user is hovering over it.

.button-block .sqs-button-element--primary:hover {

}

Step 4 - Making It Spin

Next we’re going to use the transform property to rotate the element 360 degrees, and the transition property to set how long the rotation will take. I’ve chosen 1500ms, but you can increase or decrease this to your liking.

.button-block .sqs-button-element--primary:hover {
  transform: rotate(360deg);
  transition: transform 1500ms;
}

Step 5: Consider Mobile Devices

Some devices such as Mobiles, and Tablets don’t have the ability to hover, and sometimes will perform the hover effect when pressed instead. This isn’t ideal so to account for this we’ll wrap our code in a Media Query so that it only affects devices that allow for hover.

@media (hover: hover) {
  .button-block .sqs-button-element--primary:hover {
    transform: rotate(360deg);
    transition: transform 1500ms;
  }
}

Applying This To Newsletter Block Buttons

This CSS will target all Newsletter Blocks on your Site, you can target a specific Block by adding in a block-id.

@media (hover: hover) {
  .newsletter-form .newsletter-form-button:hover {
    transform: rotate(360deg);
    transition: transform 1500ms;
  }
}

Applying This To List Section Buttons

This CSS will target all List Sections on your Site, you can target a specific Section by adding in a section-id.

@media (hover: hover) {
  .user-items-list .list-item-content__button:hover {
    transform: rotate(360deg);
    transition: transform 1500ms;
  }
}

Applying This To The Header CTA Button

@media (hover: hover) {
  #header .btn.sqs-button-element--primary:hover {
    transform: rotate(360deg);
    transition: 700ms;
  }
}

---