Button 42

Button 42Button 42

<a class="rotate-button" href="#"><span class="rotate-button-face">Button 42</span><span class="rotate-button-face-back">Button 42</span></a>

/*-- Button 42 --*/
.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:155px;
  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);
}