<a href="#" class="brackets" >Brackets</a>
<a href="#" class="brackets brackets2" >Brackets</a>
<br />
<a href="#" class="underline" >Underline</a>
<a href="#" class="underline underline2" >Underline</a>
<br />
<a href="#" class="dots" >Dots</a>
<a href="#" class="dots dots2" >Dots</a>
<a href="#" class="dots dots3" >Dots</a>
<br />
<a href="#" class="cube" data-value="Cube" >Cube</a>
<a href="#" class="cube cube2" data-value="Cube" >Cube</a>
<a href="#" class="cube cube3" data-value="Cube" >Cube</a>
<a href="#" class="cube cube4" data-value="Cube" >Cube</a>
<br />
<a href="#" class="uncover" data-value="Uncover" >Uncover</a>
<a href="#" class="uncover uncover2" data-value="Uncover" >Uncover</a>
<a href="#" class="uncover uncover3" data-value="Uncover" >Uncover</a>
<a href="#" class="uncover uncover4" data-value="Uncover" >Uncover</a>
<br />
<a href="#" class="cover" data-value="Cover" >Cover</a>
<a href="#" class="cover cover2" data-value="Cover" >Cover</a>
<a href="#" class="cover cover3" data-value="Cover" >Cover</a>
<a href="#" class="cover cover4" data-value="Cover" >Cover</a>
<br />
<a href="#" class="push" data-value="Push" >Push</a>
<a href="#" class="push push2" data-value="Push" >Push</a>
<a href="#" class="push push3" data-value="Push" >Push</a>
<a href="#" class="push push4" data-value="Push" >Push</a>
<br />
<a href="#" class="flip" data-value="Flip">Flip</a>
<a href="#" class="flip flip2" data-value="Flip">Flip</a>
<a href="#" class="flip flip3" data-value="Flip">Flip</a>
<a href="#" class="flip flip4" data-value="Flip">Flip</a>
<br />
<a href="#" class="flipUncover" data-value="Flip Uncover">Flip Uncover</a>
<a href="#" class="flipUncover flipUncover2" data-value="Flip Uncover">Flip Uncover</a>
<a href="#" class="flipUncover flipUncover3" data-value="Flip Uncover">Flip Uncover</a>
<a href="#" class="flipUncover flipUncover4" data-value="Flip Uncover">Flip Uncover</a>
<br />
<a href="#" class="lines">Lines</a>
<a href="#" class="lines lines2">Lines</a>
<a href="#" class="lines lines3">Lines</a>
<a href="#" class="lines lines4">Lines</a>
<br />
<a href="#" class="underlineFill">Underline Fill</a>
<a href="#" class="underlineFill2" data-value="Underline Fill">Underline Fill</a>
<p>The first underline link button can only underlay a colour.  It cannot change the colour of the text in a nice way such that half way through the transition, the top half of the text is one colour and the bottom half is the other colour.  This is because when an element is not tall enough to display it's contents, it shows the top first.  A work around is the second underline fill which first moves the line to the top which does alow a nice transition.  I don't believe there is a way to change the colour of the text as it expands from the bottom in the nice way without introducing either JavaScript or another element.</p>
<br />
<a href="https://www.google.com" class="box">Box</a>

<hr /><hr />
<p>Lorem <a href="#" class="brackets">ipsum</a> dolor <a href="#" class="underline">sit</a> amet, <a href="#" class="dots">consectetur</a> adipiscing <a href="#" class="cube" data-value="elit">elit</a>. Quisque <a href="#" class="uncover" data-value="tristique">tristique</a> sed <a href="#" class="cover" data-value="neque">neque</a> non <a href="#" class="push" data-value="efficitur">efficitur</a>. Phasellus <a href="#" class="flip" data-value="laoreet">laoreet</a> scelerisque <a href="#" class="flipUncover" data-value="ultrices">ultrices</a>. Phasellus <a href="#" class="lines lines3">faucibus</a> sem at <a href="#" class="underlineFill">condimentum</a> ornare. <a href="#" class="underlineFill2"data-value="Quisque">Quisque</a> tempus <a href="#" class="box">nisi</a> eu finibus fringilla. </p>

<br /><br /><br /><br /><br />
body{
  background-color:#222;
  color:#ddd;
  font-family:helvetica;
}

a{
  margin:40px;
  display:inline-block;
  color:white;
  // font-weight:bolder;
  color:grey;
  text-decoration:none;
  font-family:Helvetica;
  font-size: 2em;
  font-weight: lighter;
  vertical-align:top;
  transition: color .2s ease;
}

p{
  line-height:1.4em;
  font-weight:lighter;
  font-size:1.5em;
}

p a{
  margin:0;
  font-size:1em;
}

.brackets{

  // margin-left: 20px;
  // margin-right:20px;

  &::before, &::after{
    opacity:0;
    transition: opacity 0.2s ease, transform 0.3s ease;
    position:relative;
    display:inline-block;
  }

  &::before{
    content:"[";
    transform: translateX(20px);
    margin-right:.2em;
  }

  &::after{
    content:"]";
    transform: translateX(-20px);
    margin-left:.2em;
  }

  &:hover{
    color: #ddd;
    &::before,&::after{
      opacity:1;
      transform: translateX(0);
    }
  }


  &.brackets2{
    &::before{
      transform:translateX(-20px);
    }
    &::after{
      transform:translateX(20px);
    }

    &:hover{
      &::before{
        transform:translateX(0px);
      }
      &::after{
        transform:translateX(0px);
      }
    }

  }

}

.underline{
  position:relative;
  text-decoration:none;

  &::after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:0;
    height:.2em;
    background-color:white;
    transition: width .3s ease;
  }
  
  &:hover{
    color:#ddd;
  }

  &:hover::after{
    width:100%;
  }

  &.underline2{
    &::after{
      left:auto;
      right:0;
    }
  }
}

.dots{
  position: relative;

  &::after{
    content:"";
    display:block;
    opacity:0;
    position:absolute;
    width:5px;
    height:5px;
    bottom:-.1em;
    left:50%;
    transform:translateX(-50%);
    background-color:white;
    border-radius:50%;
    box-shadow: 0 0 0 0 #FFF, 0 0 0 0 #FFF, 0 0 0 0 #FFF, 0 0 0 0 #FFF, 0 0 0 0 #FFF, 0 0 0 0 #FFF;
    transition: opacity .2s ease, box-shadow .3s ease;
  }
  
  &:hover{
    color:#ddd;
  }

  &:hover::after{
    opacity:1;
    box-shadow: 10px 0 0 0 #FFF, -10px 0 0 0 #FFF;
  }

  &.dots2:hover::after{
    box-shadow: 10px 0 0 0 #FFF, -10px 0 0 0 #FFF, 20px 0 0 0 #FFF, -20px 0 0 0 #FFF;
  }

  &.dots3:hover::after{
    box-shadow: 10px 0 0 0 #FFF, -10px 0 0 0 #FFF, 20px 0 0 0 #FFF, -20px 0 0 0 #FFF, 30px 0 0 0 #FFF, -30px 0 0 0 #FFF;
  }

}

.cube{
  position:relative;
  transform-style:preserve-3d;
  // perspective:600px;
  backface-visibility:hidden;
  line-height:1.2em;
  transform-origin:50% 50% -.6em;
  transition:transform .3s ease;
  &::after{
    content:attr(data-value);
    background-color:#ddd;
    color:#222;
    line-height:1.2em;
    position:absolute;
    top:100%;
    left:0;
    transform-origin:50% 0;
    transform:rotateX(-90deg);
  }
  &:hover{
    transform:rotateX(90deg);
  }

  &.cube2{
    &::after{
      top:auto;
      bottom:100%;
      transform-origin:50% 100%;
      transform:rotateX(90deg);
    }

    &:hover{
      transform:rotateX(-90deg);
    }
  }

  &.cube3{
    &::after{
      top:0;
      left:100%;
      transform-origin:0% 50%;
      transform:rotateY(90deg);
    }

    &:hover{
      transform:rotateY(-90deg);
    }
  }

  &.cube4{
    &::after{
      top:0;
      right:100%;
      left:auto;
      transform-origin:100% 50%;
      transform:rotateY(-90deg);
    }

    &:hover{
      transform:rotateY(90deg);
    }
  }
}

.uncover{
  background-color:#ddd;
  color:#222;
  // padding:.3em;
  overflow:hidden;
  position:relative;
  box-shadow: 0 0 5px 0 #333 inset;
  &::after{
    content:attr(data-value);
    display:block;
    position:absolute;
    // text-decoration:underline;
    box-shadow: 0 0 5px 0 #333;
    left:0;
    top:0;
    height:100%;
    width:100%;
    // padding:.3em;
    background-color:#222;
    color:grey;
    transition: transform .3s ease;
  }
  
  &:hover{
    color:#222;
  }
  
  &:hover::after{
    transform:translateX(100%);
  }

  &.uncover2:hover::after{
    transform:translateX(-100%);
  }
  &.uncover3:hover::after{
    transform:translateY(100%);
  }
  &.uncover4:hover::after{
    transform:translateY(-100%);
  }
}

.cover{
  // padding:.3em;
  overflow:hidden;
  position:relative;
  &::after{
    content:attr(data-value);
    display:block;
    position:absolute;
    top:0;
    right:100%;
    // padding:.3em;
    transition: transform .3s ease;
    background-color:#ddd;
    color:#222;
  }
  &:hover::after{
    transform:translateX(100%);
  }

  &.cover2{
    &::after{
      right:auto;
      left:100%;
    }

    &:hover::after{
      transform:translateX(-100%);
    }
  }

  &.cover3{
    &::after{
      right:0;
      top:auto;
      bottom:100%;
    }

    &:hover::after{
      transform:translateY(100%);
    }
  }

  &.cover4{
    &::after{
      right:0;
      top:100%;
    }

    &:hover::after{
      transform:translateY(-100%);
    }
  }

}

.push{
  position:relative;
  // padding:.3em;
  overflow:hidden;
  color:transparent;
  &::before,&::after{
    content:attr(data-value);
    color:grey;
    position:absolute;
    // padding:.3em;
    transition: transform .3s ease;
    // text-decoration:underline;
  }
  &::before{
    left:0;
    top:0;
  }
  &::after{
    top:0;
    right:100%;
    color:#222;
    background-color:#eee;
  }
  &:hover{
    &::before,&::after{
      transform:translateX(100%);
    }
  }

  &.push2{
    &::after{
      right:auto;
      left:100%;
    }
    &:hover{
      &::before,&::after{
        transform:translateX(-100%);
      }
    }
  }

  &.push3{
    &::after{
      right:0;
      top:auto;
      bottom:100%;
    }
    &:hover{
      &::before,&::after{
        transform:translateY(100%);
      }
    }
  }

  &.push4{
    &::after{
      right:0;
      top:100%;
    }
    &:hover{
      &::before,&::after{
        transform:translateY(-100%);
      }
    }
  }


}

.flip{
  position:relative;
  transition: color .2s ease;
  perspective:600px;
  transform-style: preserve-3d;
  background-color:#222;
  // padding:.3em;
  &::after{
    content:attr(data-value);
    display:block;
    position:absolute;
    // padding:.3em;
    top:0;
    left:0;
    background-color:#ddd;
    color:#222;
    transform-origin:50% 0;
    transform:rotateX(300deg);
    transition:transform .5s ease;
  }

  &:hover{
    // color:#ddd;
  }

  &:hover::after{
    transform:rotateX(0);
  }

  &.flip2{
    &::after{
      transform-origin:50% 100%;
      transform:rotateX(-300deg);
    }

    &:hover::after{
      transform:rotateX(0);
    }
  }

  &.flip3{
    &::after{
      transform-origin:0% 50%;
      transform:rotateY(-300deg);
    }

    &:hover::after{
      transform:rotateY(0);
    }
  }

  &.flip4{
    &::after{
      transform-origin:100% 50%;
      transform:rotateY(300deg);
    }

    &:hover::after{
      transform:rotateY(0);
    }
  }
}

.flipUncover{
  position:relative;
  // padding:.3em;
  color:#222;
  background-color:#ddd;
  box-shadow: 0 0 5px 0 #333 inset;
  transform-style:preserve-3d;
  perspective:600px;
  &::after{
    content:attr(data-value);
    display:block;
    position:absolute;
    top:0;
    left:0;
    // padding:.3em;
    color:grey;
    background-color:#222;
    transform-origin:50% 100%;
    transition:transform .3s ease;
  }
  &:hover::after{
    transform:rotateX(-90deg);
  }
  
  &.flipUncover2{
    &::after{
      transform-origin:50% 0;
    }
    
    &:hover::after{
      transform:rotateX(90deg);
    }
  }
  
  &.flipUncover3{
    &::after{
      transform-origin:0 50%;
    }
    
    &:hover::after{
      transform:rotateY(-90deg);
    }
  }
  
  &.flipUncover4{
    &::after{
      transform-origin:100% 50%;
    }
    
    &:hover::after{
      transform:rotateY(90deg);
    }
  }
  
}

.lines{
  position:relative;
  padding:0 .2em;
  // opacity:0.5;
  transition:color .2s ease;
  &::before, &::after{
    content:"";
    display:block;
    height: 100%;
    width:2px;
    position:absolute;
    background-color:grey;
    transition: transform .3s ease, background-color;
  }
  &::before{
    top:0;
    left:0;
    transform-origin:0 0;
  }
  &::after{
    top:0;
    right:0;
    transform-origin:100% 100%;
  }
  
  
  &:hover{
    color:#ddd;
    &::before,&::after{
      transform:rotateZ(-90deg);
      background-color:#ddd;
    }
    // &::before{
    //   left:50%;
    //   transform:rotateZ(-90deg) translateY(-50%);
    // }
    // &::after{
    //   right:50%;
    //   transform:rotate(-90deg) translateY(50%);
    // }
  }
  
  &.lines2{
    &::before{
      transform-origin:100% 100%;
    }
    &::after{
      transform-origin: 0 0;
    }
    
    &:hover{
      &::before,&::after{
        transform:rotateZ(90deg);
      }
    }
  }
  
  &.lines3{
    &::before, &::after{
      transition:transform .3s ease, left .3s ease, right .3s ease;
    }
    
    &:hover{
      &::before{
        left:50%;
        transform:rotateZ(-90deg) translateY(-50%);
      }
      &::after{
        right:50%;
        transform:rotate(-90deg) translateY(50%);
      }
    }
  }
  
  &.lines4{
    &::before, &::after{
      transition:transform .3s ease, left .3s ease, right .3s ease;
    }
    &::before{
      transform-origin:100% 100%;
    }
    &::after{
      transform-origin: 0 0;
    }
    
    &:hover{
      &::before{
        left:50%;
        transform:rotateZ(90deg) translateY(50%);
      }
      &::after{
        right:50%;
        transform:rotate(90deg) translateY(-50%);
      }
    }
  }
  
}

.underlineFill{
  position:relative;
  &::before{
    content:"";
    background-color:#ddd;
    z-index:-1;
    display:block;
    position:absolute;
    overflow:hidden;
    bottom:0;
    height:2px;
    width:100%;
    transition: height .3s ease;
    vertical-align:bottom;
  }
  &:hover{
    &::before{
      height: 100%;
    }
  }
}

.underlineFill2{
  position:relative;
  &::before{
    content:attr(data-value);
    display:block;
    position:absolute;
    overflow:hidden;
    top:0;
    left:0;
    width:100%;
    top:100%;
    height:2px;
    background-color: #ddd;
    color:#222;
    transition: height .2s ease, top .1s .2s ease;
  }
  
  &:hover{
    &::before{
      transition:top .2s ease, height .5s .3s ease;
      top:0;
      height:100%;
    }
  }
  
}



.box{
  position:relative;
  padding:0 .1em;
  &::after{
    content:attr(href);
    font-size:.7em;
    text-align:center;
    display:block;
    position:absolute;
    color:transparent;
    overflow:hidden;
    border-radius: 20px;
    // font-size:.2em;
    background-image:url("https://tympanus.net/Development/InlineAnchorStyles/img/link.svg");
    background-repeat:no-repeat;
    background-size:2em 2em;
    background-position: -3em 5em;
    background-color:#ddd;
    width:600%;
    height:200%;
    padding:1em;
    padding-left:3em;
    transition:transform .3s ease, opacity .2s ease, color .2s ease, background-position .3s .3s ease;
    top:-50%;
    left:-250%;
    opacity:.2;
    transform:translateY(0) scale(0.166666, 0.5);
    white-space: pre-wrap;
    word-break: break-all;
    box-sizing:border-box;
  }
  &:hover::after{
    color:#222;
    opacity:1;
    transform:scale(1) translateY(-70%) translateX(20%);
    background-position:.5em 1em;

  }


}


View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.