How hover effects work

Hover effects are styles that change when someone moves their cursor over an element — like a button, image, or text link. They add interaction and energy to your design, helping visitors know something is clickable.

Just remember: hover effects don’t work on mobile. Since phones and tablets don’t use a cursor, those changes only appear on desktop or laptop devices.

Button Background Color Change

This example code changes a button block background to light grey and the text color to blue when you hover over it with your cursor.

Be sure to add !important after the values you are changing to make sure the computer browser knows that your code is important!

hover over this button
.sqs-block-button-element:hover{
background:#efefef!important;
color:blue!important
}

Hovering over containers

When you use the selector for a container with content inside, you can use the hover effect to apply the change at the right time. One of my favorite examples is an item inside a list (people) section. When you add a hover effect to the entire list item card, we can make the content inside change. This example changes the image from grayscale to solid color when you hover over the item, not necessarily the image itself.

.list-item img{
filter:grayscale(1)
}
.list-item:hover img{
filter:grayscale(0)!important
}
  • Monet Goode

    FOUNDER

  • Emmett Marsh

    DESIGN DIRECTOR

  • Eleanor Parks

    SUSTAINABILITY DIRECTOR

Pro tips for hover effects

Use hover for emphasis → Subtle color or brightness shifts feel more professional than harsh changes.

Avoid hover-only messaging → If key information appears on hover, mobile users won’t see it. Keep important content visible by default.

Add transitions → Smooth animations (transition: all 0.3s ease;) make hover effects look polished.

Stay consistent → Use the same hover style for similar elements so your design feels cohesive.

Check contrast → Make sure hover colors still meet accessibility standards and remain easy to read.

Custom Codey is trained to help you create border codes for Squarespace!

Previous
Previous

Using CSS Filters

Next
Next

Font & Text Properties