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!
.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.