Эффект наведения на кнопку || http://codepen.io/alexsul/pen/xOrvmJ

index.html

<div class="button"><span>hover me</span>
  <div class="border o"></div>
  <div class="border tw"></div>
  <div class="border th"></div>
  <div class="border f"></div>
</div>

style.sass

/*Height of button*/
$height : 100px
/*Width of button*/
$width : 500px

/*Speed*/
$tr : 0.2s

/*Width of border*/
$border-width : 5px

/*background of button*/
$bg : #252525
/*color of text of button*/
$color : #ff4c4c

body, html 
  height: 100%
  min-height: 100%
  margin:  0
  padding: 0
body
  font-family: sans-serif
.button
  height: $height
  width: $width
  position: relative
  top: 50%
  left: 50%
  transform: translateY(-50%) translateX(-50%)
  display: table
  cursor: pointer
  background: $bg
  transition: ($tr/3) all ease-in
  color: $color
  .border
    background: $color
    position: absolute
    transition: $tr all linear
    &.o
      height: $border-width
      width: 0
      bottom: 0
      left: 0
      transition-delay: $tr
    &.tw
      bottom: 0
      right: 0
      width: $border-width
      height: 0
    &.th
      top: 0
      right: 0
      width: 0
      height: $border-width
      transition-delay: $tr
    &.f
      top: 0
      left: 0
      width: $border-width
      height: 0
  &:hover
    background: $color
    color: $bg
    transition-delay: $tr*2
    .o, .th
      width: 100%
    .tw, .f
      height: 100%
  span
    display: table-cell
    vertical-align: middle
    font-size: em(60px)
    text-align: center
    letter-spacing: 13px
    text-transform: uppercase
    font-weight: 100