How to create a low highlight text link with a hover animation

Table of Contents Show

📌 Pin it!

Bored of the traditional link underline on Squarespace? At one time, so was I, so I removed it, adjusted the link color and that was fine.

I was satisfied with the traditional linked text just being in a solid, flat color until I found this little gem on someone’s Wordpress site!

I decided to see if I could “make it work” on my own website with Squarespace, –because whatever you might believe about me, please know I am not (& do not consider myself to be) a developer. 😄

That said, there may (probably is) a cleaner/better way to do this if you aren’t like me, if you are a developer, and don’t need to hack your way through creating a snippet like this. But this snippet worked really well for me for a long time & hopefully it’ll work for you too!

Disclaimer 1:
I should also note that I’ve only used this on v7.1 sites and haven’t tried it on any v7.0 sites yet, so I have no idea how or if it works on 7.0. Sometimes the code may differ between the two versions of Squarespace.

Disclaimer 2:
Also, the underline is there for a reason and I’ve since dropped the animation in favor of the boring, but standard, hyperlinked color & underline for accessibility purposes.

Those disclaimers aside, let’s dive in!

How to install the CSS on your site

First, make sure you check out this post to learn how to remove the link underline site-wide on 7.1 (because that’s changed recently). For this snippet to work, that underline has to be removed, so grab that snippet & paste it right above this one and make sure it's labeled so you know what each snippet does.

Now, navigate to a page on your website, while logged in, that you know already has a text link(s) on it. If you do, you’ll be able to see the updates live while you edit this snippet, and make changes a lot easier.

One thing to keep in mind is that each type of element on your site is identified with a different class in the code written to display it. So this bit of code is only going to affect hyperlinks in your normal body paragraphs & headers. It won’t affect things like header links, links in FAQ accordions, hyperlinks in image layouts, etc. because those all use different classes to target links in those places.

Step ❶ – Copy the CSS code snippet below

// low highlight & animation for text links // 
/* static linked text style */ 
.sqs-block-html a {    
  background-color: transparent;    
  box-shadow: rgba(255,255,255,.3) 0 -7px 0 0 inset;   
  box-sizing: border-box;    
  color: #XXXXXX;    
  cursor: pointer;    
  outline: 0;   
  text-decoration: none;   
  padding-left: 5px;   
  padding-right: 5px; 
} 
/* hover animation */ 
.sqs-block-html a:hover {   
  background-color: #XXXXXX;   
  color: rgba(255,255,255,1) !important;   
  box-shadow: none; 
} 
// END styling text links //

Step ❷ – Go to Custom CSS & paste this snippet into that code area.

If you already have some code there either installed by you or someone else, I’d advise you to create some separation there, by hitting enter a few times or whatever you need to do to make sure the code is organized & easy to sort through. That’s why I have a beginning & end title in /* mine */ so I can see what this segment applies to specifically.

Step ❸ – Now customize the colors!

Anywhere you see #XXXXXX swap that out with one of your brand color’s hex codes.

Anywhere you see rgba(255,255,255,1) or rgba(255,255,255,.3) that’s simply white without or with a little transparency. If you need help generating that color code style, use a free tool like Coolors.co to find the equivalent from your brand’s Hex color code. The part that dictates the transparency amount is the last digit or decimal point. 1 is solid, 0 is transparent, and anything between that in decimals is transparent, which means .3 would be like 30% transparency.

When you’re done editing, …

Step ❹ – Click Save

Done!

Now go admire or show off your new text link styling and tag or DM me on IG with a pic of your new style! @launchthedamnthing