Button Hover Effect

Hover Me

<p>Come roll over me...<br><sup>&darr;</sup></p>

<a href="#" class="button">

  <span>Hover Me</span>

</a>

sup  { font-size: 36px; font-weight: 100; line-height: 55px; }



.button

{

  text-transform: uppercase;

  letter-spacing: 2px;

  text-align: center;

  color: #0C5;



  font-size: 24px;

  font-family: "Nunito", sans-serif;

  font-weight: 300;

  

  margin: 5em auto;

  

  position: absolute; 

  top:0; right:0; bottom:0; left:0;

  

  padding: 20px 0;

  width: 220px;

  height:30px;



  background: #0D6;

  border: 1px solid #0D6;

  color: #FFF;

  overflow: hidden;

  

  transition: all 0.5s;

}



.button:hover, .button:active 

{

  text-decoration: none;

  color: #0C5;

  border-color: #0C5;

  background: #FFF;

}



.button span 

{

  display: inline-block;

  position: relative;

  padding-right: 0;

  

  transition: padding-right 0.5s;

}



.button span:after 

{

  content: ' ';  

  position: absolute;

  top: 0;

  right: -18px;

  opacity: 0;

  width: 10px;

  height: 10px;

  margin-top: -10px;



  background: rgba(0, 0, 0, 0);

  border: 3px solid #FFF;

  border-top: none;

  border-right: none;



  transition: opacity 0.5s, top 0.5s, right 0.5s;

  transform: rotate(-45deg);

}



.button:hover span, .button:active span 

{

  padding-right: 30px;

}



.button:hover span:after, .button:active span:after 

{

  transition: opacity 0.5s, top 0.5s, right 0.5s;

  opacity: 1;

  border-color: #0C5;

  right: 0;

  top: 50%;

}