<div id="outer"> 
   <div class="button_slide slide_down">BUTTON: SLIDE DOWN </div>
   <br /> <br /><br /> 
   <div class="button_slide slide_right">BUTTON: SLIDE RIGHT        </div>
   <br /> <br /><br /> 
   <div class="button_slide slide_left">BUTTON: SLIDE INSIDE        </div> 
   <br /> <br /><br /> 
   <div class="button_slide slide_diagonal">BUTTON: SLIDE DIAGONAL </div> 
   <br /> <br /><br /> 
</div>

html{ 
  height: 100%; 
} 
body{ 
  height: 100%; 
  margin: 0; 
  background: #162944; 
} 
.button_slide{ 
  color: #FFF; 
  border: 2px solid rgb(216, 2, 134); 
  border-radius: 0px; 
  padding: 18px 36px; 
  display: inline-block; 
  font-family: "Lucida Console", Monaco, monospace; font-size: 14px; 
  letter-spacing: 1px; 
  cursor: pointer; 
  box-shadow: inset 0 0 0 0 #D80286; 
  -webkit-transition: ease-out 0.4s; 
  -moz-transition: ease-out 0.4s; 
  transition: ease-out 0.4s; 
} 
.slide_down:hover{ 
  box-shadow: inset 0 100px 0 0 #D80286; 
} 
.slide_right:hover{ 
  box-shadow: inset 400px 0 0 0 #D80286; 
} 
.slide_left:hover{ 
  box-shadow: inset 0 0 0 50px #D80286; 
} 
.slide_diagonal:hover{ 
  box-shadow: inset 400px 50px 0 0 #D80286; 
} 
#outer{ 
  width: 364px; margin: 50px auto 0 auto; text-align: center; 
}