Single Element Link Styling

index.html

<a href="http://google.com/" target="_blank">Link to<br />Google</a>

Single Element Link Styling.markdown

Single Element Link Styling

Hover for effects

A Pen by Alex Bergin on CodePen.

License.

style.css

@import compass

$red: rgba(255,72,81,1)
  
a
  @include transition( all 0.15s cubic-bezier(.46,.01,.14,1.35))
  white-space: nowrap
  font-family: "Lato"
  font-weight: 900
  font-size: 32px
  letter-spacing: 2px
  text-transform: uppercase
  text-decoration: none
  color: $red
  position: absolute
  top: 50%
  left: 50%
  @include translate( -50% , -50% )
    
  &:after
    content: attr(href)
    @include transition( all 0s linear)
    overflow: hidden
    background-color: $red
    text-transform: lowercase
    position: absolute
    font-size: 10px
    letter-spacing: 0
    font-weight: 500
    bottom: -8px
    left: 0
    width: 100%
    display: inline-block
    @include translate( -15px , 100% )
    padding: 0 15px
    max-height: 0
    z-index: -1
  
  &:before
    content: ""
    @include backface-visibility( hidden )
    @include transition( all 0.15s cubic-bezier(.46,.01,.14,1.35))
    position: absolute
    width: 100% 
    height: 2px
    background-color: $red
    bottom: -5px
    z-index: -2
    
  &:hover
    color: white
      
    &:before
      padding: 10px 15px
      margin-left: -15px
      bottom: -10px
      height: 100%
      
    &:after
      @include transition( all 0.25s cubic-bezier(.46,.01,.14,1.35) 0.3s )
      @include translate( -15px , 50% )
      padding: 10px 15px
      max-height: 30px
      opacity: 1

styles

<link href="http://fonts.googleapis.com/css?family=Lato:100,400,900" rel="stylesheet" />