Hyperlink Link Animation

Install Steps

Hyperlink Line Animation

Submitted by Moov Labs Works with all template families

ezgif-3-30d4430d7994.png

Step One

From your Squarespace account, go to the Custom CSS Editor: Design > Advanced > Custom CSS

Step Two

Copy and paste the code below into the Custom CSS Editor box.

// Hyperlink Line Animation //

h1 a {
  position:relative;
  transition: 0.5s;
  cursor: pointer;
  border-bottom: 3px solid #000000;
}

h1 a::before{
  border-bottom: 3px solid #FFFFFF;
  width: 0%;
  height:100%;
  z-index: 3;
  content:'';
  position: absolute;
  bottom: -3px;
  box-sizing: border-box;
  transition: .5s;

}

h1 a:hover::before {
  width: 100% !important;
  transition: .5s;
}

Step Three

Change the h1 text property to the one you’d like to target. This can be either h1, h2, or h3.

Adjust the bottom-border thickness and color values #00000 and #FFFFFF to your liking.

Save and refresh the page. 👍

Moov Labs