Button Animations

by proticm

HTML

Rotate animation
<br>
<br>
<a class="rotate-button">
  <span class="rotate-button-face">Super</span>
  <span class="rotate-button-face-back">Cool</span>
</a>
<br>
<br>
Fill animation
<br>
<br>
<a class="fill-button">
  <span class="fill-button-hover">		
    <span class="fill-button-text">Super Cool</span>
  </span>
</a>
<br>
<br>
Border animation
<br>
<br>
<a class="border-button">
  <span>Super Cool</span>
</a>
<br>
<br>
Flip animation
<br>
<br>
<a class="button-flip">
  <span class="button-flip-face">Super</span>
  <span class="button-flip-face-back">Cool</span>
</a>

CSS

.rotate-button {
  display:inline-block;
  width:150px;
  height: 30px;
  text-align:center;
  transform-style:preserve-3d;
  cursor:pointer;
  transition:all .3s ease;
  font-family: 'arial'
}
.rotate-button .rotate-button-face, .rotate-button .rotate-button-face-back {
  position:absolute;
  display:block;
  border:1px solid #35495e;
  transition:all .5s;
  color:#35495e;
  text-decoration:none;
  width:150px;
  height: 30px;
  line-height:30px;
  border-radius: 4px;
}
.rotate-button .rotate-button-face {
  background-color:#fff;
  transform:translateZ(15px);
}
.rotate-button .rotate-button-face-back {
  background-color:#35495e;
  color:#42b883;
  border:1px solid #42b883;
  transform:rotateX(-90deg) translateZ(15px);
}
.rotate-button:hover {
  transform:rotateX(90deg);
}

/* fill button */

.fill-button {
  position: relative;
  overflow:hidden;
  display:inline-block;
  width:150px;
  height:30px;
  border:1px solid #35495e;
  text-align:center;
  box-sizing:border-box;
  color:#35495e;
  text-decoration:none;
  cursor: pointer;
  line-height:28px;
  font-family: 'arial';
  border-radius: 4px;
}
.fill-button > span {
  display:block;
}
.fill-button > .fill-button-hover:after, .fill-button > .fill-button-hover:before {
  position:absolute;
  top:0;
  opacity:0;
  display:block;
  content:"";
  width:0;
  height:30px;
}
.fill-button > .fill-button-hover:after {
  background-color:#35495e;
  transform:skewX(45deg);
  transform-origin:center center;
  transition:all .35s, opacity .4s;
  left:50%;
}
.fill-button .fill-button-hover:before {
  background-color:#42b883;
  transition:opacity 1s;
}

.fill-button .fill-button-text {
  z-index:1;
  position:relative;
  color:#35495e;
  transition:color .35s;
}
.fill-button:hover .fill-button-text {
  color:#42b883;
}
.fill-button .fill-button-hover:hover:after {
  opacity:1;
  left:2%;
  width:95%;
  transform:skewX(45deg);
}
.fill-button > .fill-button-hover:hover:before {
  opacity: 1;
  left: 0;
  width:100%;
}

/*...