A Pen by Alan Crissey.

Flippin-Link.markdown

Flippin Link

A Pen by Alan Crissey on CodePen.

License.

index.jade

a.slide(href='#') 
  span(data-text='Flip That Link') Flip That Link

style.less

.slide {
  margin: 20px;
  display: inline-block;
  font-family: sans-serif;
  font-weight: bold;
  line-height: 44px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #000;
  text-decoration: none;
  vertical-align: middle;
  .perspective(1000px);
  
  span {
    display: inline-block;
    position: relative;
    padding: 0 15px;
    background-color: #fff;
    .transition(all 0.3s ease);
    .transform-origin(50 0);
    .transform-style(preserve-3d);
    
    &:before {
      background-color: #ccc;
      text-align: center;
      content: attr(data-text);
      color: #fff;
      position: absolute;
      left: 0;
      top: 100%;
      width: 100%;
      height: 100%;
      .transition(all 0.3s);
      .rotateX(-90deg);
      .transform-origin(50 0);
    }
  }
  
  &:hover {
    
    span {
      background-color: #ccc;
      .translate3d(0, -22px, 0);
      .rotateX(90deg);
      
      &:before {
        background-color: #000;
      }
    }
  }
}