Squarespace tutorial | Change the colour of a link on hover
Often when building a Squarespace website, you’ll be adding links. In fact, almost every Squarespace website on the internet will include links.
A popular request from clients when I’m adding links to their websites is to add a hover effect. Not only do they want a hover effect, but they want it to be as obvious as possible. When a user hovers over a link, they want a drastic change to encourage clicks. The most common hover effect to add is a change to the font colour.
Changing the colour of links within a hover effect is a relatively quick task but it does require some custom code and isn’t yet a native Squarespace feature.
How to change the colour of Squarespace hover links
Once you’ve added the links to your website, head to your custom CSS panel and add in the below code:
a:hover {
color: blue !important;
}
Watch the video
Check out the YouTube video below 👇
Want a framework for designing the perfect homepage?
You can then edit the colour you want your links to change to when a user hovers over them within the code too.
The above code targets all the links on your website, if you want to target individual links then you need to make your code even more specific.
In order to target specific links you’ll need to wrap the code with your target (e.g. h1, h2, h3 etc). Check out the example below for a better understanding:
h1, h2, h3, h4, p {
a:hover {
color: blue !important;
}
}
You can also add a transition to the code, making the colour change smoother and less jarring. Simply add the below and play around with the speed of the transition in and out.
h1, h2, h3, h4, p {
a {
transition: 0.3s !important;
}
a:hover {
color: blue !important;
transition: 0.3s;
}
}
As you can see, this does require some customisation and you’ll need to take time to ensure you’re targeting the right links with the code, but if you do so it’s easy to change the hover effect colour on Squarespace links.
If you enjoyed this article, be sure to check out my tutorial for removing the underlines from Squarespace hyperlinks next.
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
