<h1>タンパタン系</h1>
<button class="buttonA">BUTTON</button>
<button class="buttonB">BUTTON</button>
<button class="buttonC">BUTTON</button>
<button class="buttonD">BUTTON</button>


<h1>プランプラン系</h1>
<button class="buttonE">BUTTON</button>
<button class="buttonF">BUTTON</button>
<button class="buttonG">BUTTON</button>
<button class="buttonH">BUTTON</button>
<button class="buttonI">BUTTON</button>
body {
  background-color: rgba(238,139,103,.2);
}
h1 {
  margin: 20px 20px 10px;
  font-size: 85%;
}

button {
	margin: 0 20px 40px;
	padding: 1em 2em;
	border: none;
  box-sizing:border-box;
  width:180px;
	display: inline-block;
  font-size: 114%;
  position: relative;
	cursor: pointer;
}


/* buttonA */
.buttonA {
  border: 3px solid rgb(238,139,103);
  background-color: #FFF;
  color: rgb(238,139,103);
	-webkit-perspective: 300px;
	-webkit-transform-style: preserve-3d;
	perspective: 300px;
	transform-style: preserve-3d;
}
.buttonA::after {
	padding: 1em 2em;
  box-sizing:border-box;
  content: 'BUTTON';
  display:block;
  width:174px;
  height:100%;
  position:absolute;
  top: 0;
  left: 0;
  color: #FFF;
  background-color:rgb(238,139,103);
  -webkit-transform-origin: 50% 0;
  -webkit-transform: rotateX(90deg);
  transform-origin: 50% 0;
  transform: rotateX(90deg);
  transition: .4s all;
  opacity: 0;
}
.buttonA:hover::after {
	-webkit-transform: rotateX(0);
	transform: rotateX(0);
	opacity: 1;
}

/* buttonB */
.buttonB {
  border: 3px solid rgb(238,139,103);
  background-color: #FFF;
  color: rgb(238,139,103);
	-webkit-perspective: 300px;
	-webkit-transform-style: preserve-3d;
	perspective: 300px;
	transform-style: preserve-3d;
}
.buttonB::after {
	padding: 1em 2em;
  box-sizing:border-box;
  content: 'BUTTON';
  display:block;
  width:174px;
  height:100%;
  position:absolute;
  top: 0;
  left: 0;
  color: #FFF;
  background-color:rgb(238,139,103);
  -webkit-transform-origin: 50% 100%;
  -webkit-transform: rotateX(-90deg);
  transform-origin: 50% 100%;
  transform: rotateX(-90deg);
  transition: .4s all;
  opacity: 0;
}
.buttonB:hover::after {
	-webkit-transform: rotateX(0);
	transform: rotateX(0);
	opacity: 1;
}

/* buttonC */
.buttonC {
  border: 3px solid rgb(238,139,103);
  background-color: #FFF;
  color: rgb(238,139,103);
	-webkit-perspective: 300px;
	-webkit-transform-style: preserve-3d;
	perspective: 300px;
	transform-style: preserve-3d;
}
.buttonC::after {
	padding: 1em 2em;
  box-sizing:border-box;
  content: 'BUTTON';
  display:block;
  width:174px;
  height:100%;
  position:absolute;
  top: 0;
  left: 0;
  color: #FFF;
  background-color:rgb(238,139,103);
  -webkit-transform-origin: 0 50%;
  -webkit-transform: rotateY(-70deg);
  transform-origin: 0 50%;
  transform: rotateY(-70deg);
  transition: .4s all;
  opacity: 0;
}
.buttonC:hover::after {
	-webkit-transform: rotateY(0);
	transform: rotateY(0);
	opacity: 1;
}
/* buttonD */
.buttonD {
  border: 3px solid rgb(238,139,103);
  background-color: #FFF;
  color: rgb(238,139,103);
	-webkit-perspective: 300px;
	-webkit-transform-style: preserve-3d;
	perspective: 300px;
	transform-style: preserve-3d;
}
.buttonD::after {
	padding: 1em 2em;
  box-sizing:border-box;
  content: 'BUTTON';
  display:block;
  width:174px;
  height:100%;
  position:absolute;
  top: 0;
  left: 0;
  color: #FFF;
  background-color:rgb(238,139,103);
  -webkit-transform-origin: 100% 50%;
  -webkit-transform: rotateY(70deg);
  transform-origin: 100% 50%;
  transform: rotateY(70deg);
  transition: .4s all;
  opacity: 0;
}
.buttonD:hover::after {
	-webkit-transform: rotateY(0);
	transform: rotateY(0);
	opacity: 1;
}
/* buttonE */
.buttonE {
  border: 3px solid rgb(238,139,103);
  background-color: #FFF;
  color: rgb(238,139,103);
	-webkit-perspective: 300px;
	-webkit-transform-style: preserve-3d;
	perspective: 300px;
	transform-style: preserve-3d;
  overflow:hidden;
}
.buttonE::after {
	padding: 1em 2em;
  box-sizing:border-box;
  content: 'BUTTON';
  display:block;
  width:174px;
  height:100%;
  position:absolute;
  top: 0;
  left: 0;
  color: #FFF;
  background-color:rgb(238,139,103);
  -webkit-transform-origin: 0 0;
  -webkit-transform: rotate(-30deg);
  transform-origin: 0 0;
  transform: rotate(-30deg);
  transition: .4s all;
  opacity: 0;
}
.buttonE:hover::after {
	-webkit-transform: rotate(0);
	transform: rotate(0);
	opacity: 1;
}

/* buttonF */
.buttonF {
  border: 3px solid rgb(238,139,103);
  background-color: #FFF;
  color: rgb(238,139,103);
	-webkit-perspective: 300px;
	-webkit-transform-style: preserve-3d;
	perspective: 300px;
	transform-style: preserve-3d;
  overflow:hidden;
}
.buttonF::after {
	padding: 1em 2em;
  box-sizing:border-box;
  content: 'BUTTON';
  display:block;
  width:174px;
  height:100%;
  position:absolute;
  top: 0;
  left: 0;
  color: #FFF;
  background-color:rgb(238,139,103);
  -webkit-transform-origin: 0 100%;
  -webkit-transform: rotate(30deg);
  transform-origin: 0 100%;
  transform: rotate(30deg);
  transition: .4s all;
  opacity: 0;
}
.buttonF:hover::after {
	-webkit-transform: rotate(0);
	transform: rotate(0);
	opacity: 1;
}

/* buttonG */
.buttonG {
  border: 3px solid rgb(238,139,103);
  background-color: #FFF;
  color: rgb(238,139,103);
	-webkit-perspective: 300px;
	-webkit-transform-style: preserve-3d;
	perspective: 300px;
	transform-style: preserve-3d;
  overflow:hidden;
}
.buttonG::after {
	padding: 1em 2em;
  box-sizing:border-box;
  content: 'BUTTON';
  display:block;
  width:174px;
  height:100%;
  position:absolute;
  top: 0;
  left: 0;
  color: #FFF;
  background-color:rgb(238,139,103);
  -webkit-transform-origin: 100% 0;
  -webkit-transform: rotate(30deg);
  transform-origin: 100% 0;
  transform: rotate(30deg);
  transition: .4s all;
  opacity: 0;
}
.buttonG:hover::after {
	-webkit-transform: rotate(0);
	transform: rotate(0);
	opacity: 1;
}

/* buttonH */
.buttonH {
  border: 3px solid rgb(238,139,103);
  background-color: #FFF;
  color: rgb(238,139,103);
	-webkit-perspective: 300px;
	-webkit-transform-style: preserve-3d;
	perspective: 300px;
	transform-style: preserve-3d;
  overflow:hidden;
}
.buttonH::after {
	padding: 1em 2em;
  box-sizing:border-box;
  content: 'BUTTON';
  display:block;
  width:174px;
  height:100%;
  position:absolute;
  top: 0;
  left: 0;
  color: #FFF;
  background-color:rgb(238,139,103);
  -webkit-transform-origin: 100% 100%;
  -webkit-transform: rotate(-30deg);
  transform-origin: 100% 100%;
  transform: rotate(-30deg);
  transition: .4s all;
  opacity: 0;
}
.buttonH:hover::after {
	-webkit-transform: rotate(0);
	transform: rotate(0);
	opacity: 1;
}

/* buttonI */
.buttonI {
  border: 3px solid rgb(238,139,103);
  background-color: #FFF;
  color: rgb(238,139,103);
	-webkit-perspective: 300px;
	-webkit-transform-style: preserve-3d;
	perspective: 300px;
	transform-style: preserve-3d;
  overflow:hidden;
}
.buttonI::after {
	padding: 1em 2em;
  box-sizing:border-box;
  content: 'BUTTON';
  display:block;
  width:174px;
  height:100%;
  position:absolute;
  top: 0;
  left: 0;
  color: #FFF;
  background-color:rgb(238,139,103);
  -webkit-transform-origin: 50% 0;
  -webkit-transform: rotate(-90deg);
  transform-origin: 50% 0;
  transform: rotate(-90deg);
  opacity: 0;
}
.buttonI:hover::after {
  animation: purann2 1s linear 0s 1 forwards;
	opacity: 1;
}
@keyframes purann2 {
	  0% { transform: rotate(-90deg); }
	 25% { transform: rotate(20deg); }
	 50% { transform: rotate(-10deg); }
	 75% { transform: rotate(5deg); }
	100% { transform: rotate(0deg); }
}

Rerun