Squarespace hyperlink styling & customisation - go from standard to stand out with these free code snippets
The native Squarespace hyperlink style is prrettty boring, and you (and I!) can do better than that with our Squarespace website design.
Luckily, with just a few lines of CSS you can create some really cool effects that will make the hyperlinks on your Squarespace website look fantastic. And double luckily I’ve compiled these code snippets that you can plug in and enjoy on your Squarespace website. Today we’re talking Squarespace hyperlink styling & customisation to help your site to stand out from the crowd!
Note: These CSS snippets are for Squarespace 7.1 All of this code is added in the CSS injection panel for your Squarespace website, found under design in the main menu.
Pst .. before we start - if this post gets you code curious - check out this Free Workshop from my mentor Rache where she breaks down what makes a standout site, how you can unlock creativity & confidence through code and gives you a peek behind the curtains of the course that taught me everything I know about using code on Squarespace!
This post contains affiliate links. If you make a purchase via one of these links I may get a small kickback. I only recommend products and services I use and love myself!
remove underline from link Using cSS On squarespace
A little context - the line underneath your hyperlinks in Squarespace is a “text-decoration” and it’s this that we want to target when removing the underline from your original Squarespace link using CSS. But leaving our links totally incognito isn’t a great idea either as they’ll be missed by our visitors. So once we’ve removed the original styling we want to add some new Jazz to the party.
To remove your underlines add this code snippet to your CSS panel:
///REMOVE HYPERLINK UNDERLINE/// a { text-decoration: none !important; }
Hyperlinks and Accessibility
Before we go any further, a quick note on hyperlinks & accessibility! To ensure your website is as accessible as possible (meaning people with varying needs can engage & benefit from what you have to offer), you want to make sure that where possible your hyperlinks are…
Not just differentiated by colour (people with colour blindness may not see the contrast) you want to add at least a change of font weight, an underline or low light or something else that makes it obvious that it’s a hyperlink.
Covering a series of words/ part of a sentence that means the link makes sense so as opposed to “for my free blogging guide - click here” with just the here highlighted, instead try “get your free blogging guide here” where the whole phrase is highlighted (this is to help people with screen readers navigate & understand your links.
OK… on with the styling!
Style hyperlinks on Squarespace
Time for our jazzy hyperlink styling! I’ve included 3 of my favourite effects here, but there are many more (check out Standout Squarespace* for a course that is just incredible for learning all there is to learn about styling Squarespace with code).
I can’t let you go without a little CSS education - because, clearly, the more you understand what you’re doing the better you will apply it and be able to tweak and personalise to meet your needs :)
To apply all of these hyperlink effects this we will target the class “a” which stands for active link. This “a” can relate to either paragraph text, or header text, or indeed anything else that has the class “active” on our site. This is important to know as we want to make sure we target the right type of text with our code.
To target paragraph text we start with p followed by a. And for a different effect on hover we will include :hover after the a.
See this below:
p a { YOURSTYLING WILL GO HERE } p a:hover { YOURSTYLING WILL GO HERE}
To target header text we start with the relevant h (1,2,3 or 4), followed by a.
h1 = header 1, h2 = header 2 and so on. To apply your effect to all headers or any combination you can write them all out and add commas in between them e.g. h1,h2,h3 for headers 1,2 and 3.
For a change of effect for hover we do exactly the same as for paragraph text by including :hover after the “a”.
The below shows this for an effect on both static (the first snippet) and hover (the second snippet) applied to all headers.
h1 a, h2 a, h3 a, h4 a { YOUR STYLING WILL GO HERE } h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover { YOUR STYLING WILL GO HERE }
OK, OK, so now for the snippets I promised. All of these are for paragraph text - but now you know how to alter them for header text too.
CSS to Change the colour of your hyperlinks on Squarespace
This snippet changes the colour of your hyperlinks in their static state and on hover.
This first snippet changes the colour of your hyperlinks so they stand out from the rest of your text, and the second changes their colour again on hover. (Again - reminder about accessibility - make sure that the colour isn’t the only thing that differentiates your hyperlinks :))
///LINK COLOUR IN STATIC STATE/// p a { color: #HEXCODE1 !important; } ///LINK COLOUR ON HOVER/// p a:hover { color: #HEXCODE2 !important; }
How to Customise hyperlink colours using CSS on squarespace
Here you can customise these snippets by adding whichever colour codes you like to align with your brand by replacing the “#HEXCODE”s with your own brand Hexcodes. The first one is the link in its normal state and the second is on hover. Remember you can also apply this to your header fonts.
CSS To Make your hyperlinks bold on Squarespace
This snippet makes your hyperlinks bold (and even bolder on hover if you like!) A great way to make your links stand out without them being overstyled.
///LINK FONT WEIGHT STATIC STATE/// p a { font-weight: 500; } ///LINK FONT WEIGHT ON HOVER/// p a: hover { font-weight: 600; }
Customise bold hyperlinks using CSS on Squarespace
You can change the font weights to whatever you want here. Note though that if your font is not available in a weight that you have chosen Squarespace will automatically choose the closest match.
Some fonts have more options than others so be aware of this when you’re choosing the weight. You can of course choose for your weight to be bold in static state and then go back to your normal weighting on hover.
Remember you can also apply this to your header fonts by following the instructions above.
Add a low-light to your hyperlinks on Squarespace using CSS
This code snippet adds a lowlight to your links which changes colour on hover.
///LINK LOWLIGHT STATIC STATE/// p a {background: linear-gradient( 180deg, rgba(255, 0, 0, 0) 70%, #HEXCODE1 30% ) !important; } ///LINK LOWLIGHT ON HOVER/// p a:hover {background: linear-gradient( 180deg, rgba(255, 0, 0, 0) 70%, #HEXCODE2 30%) !important; }
Customise hyperlink low lights CSS Snippet
Don’t forget to switch out the “HEXCODES” to the colour code you’d like to use.
And as I mentioned above, if you’d like to also apply this to your headers you will add the relevant h1 a, h2 a, h3 a, h4 a etc next to the p a, and h1 a:hover etc… you know the drill by now!
So there you go
Squarespace hyperlinks - Styled & customised!
3 cool effects that you can add to jazz up your hyperlinks on Squarespace.
You can also combine these - bold purple hyperlink with green lowlight anyone?! Let me know how you get on - I’d love to see your work in the wild!
This tutorial got you code curious?
Check out the incredible free workshop from my mentor Rache at Square stylist - not only will she break down the basics of CSS, she’ll actually build a whole homepage with you!!
Less of a DIYer and want someone to do it for you? Or you can grab a power hour with me to solve some of your Squarespace niggles (including installing hyperlink styling on your Squarespace website!)…
New on the ‘Gram…
