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 👇
Want a framework for designing the perfect homepage?
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;
}
}
}
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.
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
