Add Hover Effects to Text Links on Squarespace [EASY CSS TRICKS]
When you add links to your Squarespace content, you want users to know that there’s something interactive there for them to click on.
As a Squarespace designer I have a few tricks up my sleeve to help make text links stand out and the good news is, I’m going to share them with you.
Watch the video
Check out the YouTube video below 👇
Head to Website > Website Tools > Custom CSS and enter one of the following codes to your custom CSS box:
1.
h1, h2, h3, h4, p {
a {
transition: 0.2s;
&:hover {
opacity: 0.6;
}
}
}
2.
h1, h2, h3, h4, p {
a {
transition: 0.2s;
&:hover {
letter-spacing: 10px;
}
}
}
3.
h1, h2, h3, h4, p {
a {
transition: 0.2s;
&:hover {
color: #000000 !important;
}
}
}
4.
h1, h2, h3, h4, p {
a {
transition: 0.2s;
&:hover {
padding-left: 10px !important;
}
}
}
📩 Join the inner circle to get exclusive code updates
The wrapping of this code tells Squarespace that you’re targeting all of the links that appear anywhere on your website meanwhile the code itself sets your chosen effect.
You can choose any of the above effects to add to your text and edit each one, changing the numbers in the code, to get the effect you want.
Once you’re happy, hit save and you’ll have added a hover effect to your text links on Squarespace.
Your designer
I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.