How to create a button hover effect in Squarespace
This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes
Hover effects are a great way to make boring buttons more eye catching, and to let your site visitors know “this is a think to click on!!” The best part? They are SUPER easy to code with a little clever CSS!
All you need to do is literally tell the browser to apply a code on a hover by adding the word hover. Yup! That easy!!
Check out these sample codes below and give it a try on your own site:
HOVER EFFECT ONE
.sqs-block-button-element:hover {background-color:#f6c03c; color:#000}
HOVER EFFECT TWO
.sqs-block-button-element:hover {text-decoration:underline}
HOVER EFFECT THREE
.sqs-block-button-element:hover {box-shadow: 0px 2px 5px rgba(0,0,0,.3)}
Pro tips for your button codes!
Some browsers are picky about button codes. If you are trying a code above and it doesn’t work, label it important by literally using the text !important before the semi-colon in your code. Here is an example using the color change code above:
.sqs-block-button-element:hover {
background-color:#f6c03c!important; color:#000!important}
You can isolate individual sizes of buttons if you use their “code name” in your CSS!
Try adding —small, —medium or —large your code to have it work for one specific button size.
Small Buttons
.sqs-block-button-element—small
Medium Buttons
.sqs-block-button-element—medium
Large Buttons
.sqs-block-button-element—large
