<a href="#" class="link-animate-arrow arrow-down">Show More</a>
<a href="#" class="{{link_classes}}">{{link_text}}</a>
{
  "link_classes": "link-animate-arrow arrow-down",
  "link_text": "Show More"
}
  • Content:
    // pattern styles
    $link-timing:0.25s;
    // pattern styles
    // from https://codepen.io/shshaw/pen/pdyJBW
    a[href].link-underline,
    .links-underline a[href] {
      border-bottom:1px currentColor solid;
      transition:color $link-timing ease-in-out;
      &:hover,
      &:active {
        border-bottom:2px currentColor solid;
        text-decoration:none;
      }
    }
    a[href].link-animate-underline,
    .links-animate-underline a[href]{ 
      background-image:linear-gradient(to bottom, transparent 20%, currentColor 21%);
      background-position:0 1em;
      background-repeat:no-repeat;
      background-size:0% 6px;
      text-decoration:none;
      transition:background-size $link-timing ease-in-out;
      &:hover,
      &:focus {
        background-size:100% 6px;
      }
    }
    a[href].link-animate-arrow {
      position:relative;
      transition:padding-right $link-timing;
      &::after {
        display:inline-block;
        font-family: "Font Awesome 5 Free";
        font-weight:900;
        opacity:0;
        position:absolute;
        transform:scale(0.8);
        transition:opacity $link-timing, right $link-timing, left $link-timing, bottom $link-timing;
      }
      &:hover {
        text-decoration:none;
        &::after {
          opacity:1;
        }
      }
      &.arrow-left {
        &::after {
          content: "\f061";
          right:0;
        }
        &:hover {
          padding-right:1.125rem;
        }
      }
      &.arrow-right {
        &::after {
          content: "\f060";
          left:0;
        }
        &:hover {
          &::after {
            left:-1.125rem;
          }
        }
      }
      &.arrow-down {
        &::after {
          content: "\f063";
          bottom:-0.5rem;
          left:50%;
          margin-left:-1rem;
          text-align:center;
          width:2rem;
        }
        &:hover {
          &::after {
            bottom:-1.4rem;
          }
        }
      }
    }
    
    
  • URL: /components/raw/link/link.scss
  • Filesystem Path: source/patterns/atoms/link/link.scss
  • Size: 1.7 KB

Links

Default

The default is the link style from Bootstrap. Links are not underlined by default but are underlined on hover.

Underlined

Using the link-underlined class on the link (or the links-underlined on a container), we can add an underline for the link’s default state. On hover, the thickness of the underline doubles to indicate the user interaction.

Animated Underline

Using the link-animate-underline class on the link (or the links-animate-underline on a container), we can add an animated underline for the link’s hover state. The default link style will still not have text decoration. This pattern comes from CodePen.

Arrows

Using additional classes on a link, we can add an animated arrow on hover. Classes control the direction of the arrow. The default state is to have no text decoration.