<header>
  <h1>Button Hover animation</h1>
</header>

<main class='container'>
  <button class='myButt one'>
    <div class='insider'></div>
    Hover over me
  </button>
</main>
<main class='container'>
  <button class='myButt two'>
    Hover over me
  </button>
</main>
<main class='container'>
  <button class='myButt three'>
    Hover over me
  </button>
</main>
<main class='container'>
  <button class='myButt four'>
  <div class='icon'>&#x2605;</div>
    <span>Hover over me</span>
  </button>
</main>

<main class='container'>
  <button class='myButt five'>
  <div class='layer'>YEAH</div>
    Hover over me
  </button>
</main>

$red:#F44336;
@mixin transition($in) {
  transition:$in;
  -webkit-transition:$in;
  -moz-transition:$in;
  -o-transition:$in;
  -ms-transition:$in;
}
@mixin transform($in) {
  transform:$in;
  -webkit-transform:$in;
  -moz-transform:$in;
  -o-transform:$in;
  -ms-transform:$in;
}
@mixin animation($in) {
  animation:$in;
  -webkit-animation:$in;
  -moz-animation:$in;
  -o-animation:$in;
  -ms-animation:$in;
}

body {
  margin:0;
  padding:0;
  background-color:#222;
}
* {
  font-family:Helvetica,sans-serif;
  color:$red;
}

header {
  text-align:center;

  h1 {
    text-transform:uppercase;
  }
}

.myButt {
  outline:none;
  border:none;
  padding:20px;
  display:block;
  margin:50px auto;
  cursor:pointer;
  font-size:20px;
  background-color:transparent;
  position:relative;
  border:2px solid #fff;

  @include transition(all 0.5s ease);
}


// ################ ONE

.one {
  border-color:#fff;
  overflow:hidden;
  color:#fff;

  .insider {
    background-color:#fff;
    width:100%;
    height:20px;
    position:absolute;
    left:-135px;

    @include transform(rotateZ(45deg));
  }

  &:hover {
    background-color:$red;
    border-color:#fff;
    color:#fff;

    .insider {
      @include transition(all 0.3s ease);
      left:135px;
    }
  }
}

// ################ TWO

.two {
  color:#fff;

  &:hover {
    border-color:$red;
    color:$red;

    @include animation(shakeThatBooty 0.3s linear 1);   
  }
}

@keyframes shakeThatBooty {
  33% {
    @include transform(rotateZ(10deg));
  }
  67% {
    @include transform(rotateZ(-10deg));
  }
  100% {
    @include transform(rotateZ(10deg));
  }
}


// ################ THREE

.three {
  color:#fff;
  border-color:transparent;

  &:before {
    width:0;
    height:3px;
    content:" ";
    background-color:$red;
    position:absolute;
    top:0;
    left:50%;

    @include transition(all 0.3s ease);
  }

  &:after {
    @extend .three:before;
    top:100%;
  }

  &:hover {
    letter-spacing:8px;
    color:$red;

    &:before {
      width:100%;
      left:0;
    }
    &:after {
      width:100%;
      left:0;
    }
  }
}

// ################ FOUR

.four {
  overflow:hidden;
  
  span {
    color:#fff;
    display:inline-block;
    
    @include transition(all 0.3s ease);

  }

  .icon {
    position:absolute;
    left:-60px;
    top:0;
    color:#fff;
    padding:20px;
    background-color:$red;
    @include transition(all 0.3s ease);
  }

  &:hover {
    .icon {
      left:0px;
    }
    span {
      color:$red;
      margin-left:50px;
    }
  }
}

// ################ FIVE

.five {
  overflow:hidden;
  color:#fff;

  .layer {
    color:#fff;
    position:absolute;
    top:-70px;
    width:100%;
    left:0;
    padding:20px 0;
    background-color:$red;
    @include transition(all 0.3s ease);
  }

  &:hover {
    .layer {
      top:0;
    }
  }
}

/*
Pure CSS
*/