Create Italic hover effects for navigation & links in Squarespace

Introducing hover states to your website's hyperlinks can make your site more interactive and dynamic. Simply put, a hover state refers to the visual changes that occur when a user hovers their cursor over a webpage element, such as a hyperlink or button. These changes can include alterations in colour, size, or style that provide visual feedback to the user indicating that they are interacting with the element.

At Toasted Coconut Creative, we are big fans of adding an italic hover state to website links, especially for navigation links, which you may have already noticed on our menu. This technique adds a modern look to your website's navigation and we prefer it to other hover states such as underlines.

Want to try it for yourself? It's easy - just head to your Design > Custom CSS, and copy and paste the CSS codes. This tutorial works for Squarespace 7.1 and 7.0.

Navigation italic text on hover

/* ITALIC HOVER FOR NAVIGATION LINKS */
header nav a:hover{font-style: italic;}

Headings italic text on hover

/* H1 ITALIC HOVER */
h1 a:hover {font-style: italic;}

 /* H2 ITALIC HOVER */
h2 a:hover {font-style: italic;}

/* H1 ITALIC HOVER */
h3 a:hover {font-style: italic;}

/* H1 ITALIC HOVER */
h4 a:hover {font-style: italic;}

Paragraph italic text on hover

/* PARAGRAPH ITALIC HOVER */
p a:hover{font-style: italic;}

WANT TO SAVE THIS TUTORIAL? PIN IT TO PINTEREST!