How to animate your links on hover in Squarespace 7.0 & 7.1

This post may contain affiliate links. We may receive a commission for purchases made through these links (at no cost to you, of course! 🙂)

A quick and easy way to elevate your site is by changing the hover state of your hyperlinks (hyperlinks just being a fancy name for links on your website). There are a number of changes we can make, but we'll take you through some of the most simple and effective:

• Italicizing links on hover

• Changing the color of links on hover

• Adding an underline animation to links on hover

Let's get started!

Identifying your font type in Squarespace 7.0 and 7.1

No matter which code you apply, you'll first need to determine which Headings or Paragraphs your font will apply to.

In Squarespace 7.0, there are four different Heading/Paragraph style options:

• Heading One h1

• Heading Two h2

• Heading Three h3

• Paragraph p

In Squarespace 7.1, there are actually 4 Headings and 3 Paragraph sizes.

• Heading One h1

• Heading Two h2

• Heading Three h3

• Heading Four h4

• All Paragraphs (paragraph 1, 2 & 3) p

• Paragraph 1 / Large Paragraph p.sqsrte-large

• Paragraph 3 / Small Paragraph p.sqsrte-small

Now that you know which tags apply to each font style, let's get started with the coding!

Change your link to Italic on hover

The first animation you can add to your website is changing text to italic when hovered over. I love this little piece of code to add a sophisticated and editorial touch instantly. And when I say instantly, I mean it!

First, copy the code below and paste it into Squarespace's custom CSS panel (Design > Custom CSS).

Next, replace FONTSTYLE text with the heading/paragraph code you're targeting as it's listed above.

FONTSTYLE a:hover {
    font-style: italic;
}

For example, if I'm using Squarespace 7.1 and want to target links H1 my custom CSS snippet would look like this:

h1 a:hover {
    font-style: italic;
}

See what I meant? Only two steps and you have a super cool text effect!

Now, let's take a look at how we can change the color of our text links upon hover.

---

Change your link color on hover

Another quick way to create some movement on your website is to change the color of hyperlinks on hover. You'll do the same thing here - copy and paste the code below into your Squarespace website by going to Design > Custom CSS.

FONTSTYLE a:hover {
    color: #FFDA00 !important;
}

First, replace the FONTSTYLE text with the heading/paragraph code you're targeting (all codes are listed earlier in the post). This tells the website to apply the color change to only links in that text style.

Just as easy as the first animation, but just as effective. You could even combine the two to create a colorful italic link upon hover:

FONTSTYLE a:hover {
    font-style: italic;
    color: #FFDA00 !important;
}

Remember to replace FONTSTYLE with the correct tag to ensure it applies to your site!

Last but not least, let's review how we can add a simple underline animation to hyperlinks on hover.

---

Add an underline to you link on hover

Our last animation tutorial is how to add an underline to hyperlinks on hover.

In Squarespace, hyperlinks by default have an underline so they are clearly called out to the viewer. Sometimes this can look a bit standard, and a great way to elevate it is by adding the underline on hover instead.

For this feature, we will need different code based on the version of Squarespace being used. First, let's tackle how to do this in Squarespace 7.1!

Squarespace 7.1

First, we'll need to remove the default underline the text has, and then add the underline back in when the link gets hovered over. Copy and paste the code below into Squarespace's custom CSS panel (Design > Custom CSS).

You're then going to replace FONTSTYLE with the text tag you're looking to target. All codes are listed earlier in the post!

FONTSTYLE a {
text-decoration: none !important;
}

FONTSTYLE a:hover {
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-decoration-color: #FFDA00 !important;
}

You can also change this code to make it your own:

• To increase or decrease the hover underline thickness, you can change the px amount in this line of code:

text-decoration-thickness: 1px !important;

• To change the color of the underline, you can change the hex color in this line of code:

  text-decoration-color: #FFDA00 !important;

Squarespace 7.0

For websites in 7.0, copy and paste this code block into Squarespace's custom CSS panel (Design > Custom CSS).

FONTSTYLE a {
 border-bottom: none !important;
}

FONTSTYLE a:hover {
  border-bottom: 1px solid #FFDA00 !important;
}

Then replace FONTSTYLE with the text tag you're looking to target. All codes are listed earlier in the post. Additionally, you'll want to change out the hex code to fit your brand colors.

As you can see, there are so many options when it comes to customizing hyperlinks, and I hope you found these features helpful for your own website!

Loved that post? Check out some more design tips below!

How to create a vertical line in Squarespace (7.0 & 7.1)
How to create rounded corners & unique shapes for your images in Squarespace (no coding!)
How to create a full width Instagram feed in Squarespace 7.1
Creating an “as featured in” logo bar on Squarespace
How to add a button to your header navigation in Squarespace

If you liked this post, Pin it to Pinterest! 👇🏻