Modern Links

Change all links within text on your website to underlines and animate up on hover. Change the color to match your brand's theme. Any hex color will work! Available for both Squarespace 7.0 & 7.1 official templates.

Copy and paste the code below - instructions found here

version - 7.0 & 7.1

@linkColor: #FFA500; //change this hex to anything you'd like. Keep the semi colon afterwards.

#page p > a {
  transition: box-shadow .5s;
  box-shadow: inset 0 -7px 0 0 @linkColor;

#page p > a:hover {
  box-shadow: inset 0 -40px 0 0 @linkColor;
  transition: box-shadow .2s cubic-bezier(1,.05,.75,.25);

For Squarespace official templates only. May not work with third-party templates or in conjunction with other plugins that affect the same components. If you have any problems or questions, please contact us!