<h1>反転系</h1>
<button class="buttonA">BUTTON</button>
<button class="buttonB">BUTTON</button>
<button class="buttonC">BUTTON</button>

<h1>むにっと/ぽよ系</h1>
<button class="buttonD">BUTTON</button>
<button class="buttonE">BUTTON</button>
<button class="buttonF">BUTTON</button>

<h1>スライド系</h1>
<button class="buttonG">BUTTON</button>
<button class="buttonH">BUTTON</button>
<button class="buttonI">BUTTON</button>
<button class="buttonJ">BUTTON</button>
<button class="buttonK">BUTTON</button>
<button class="buttonL">BUTTON</button>
<button class="buttonM">BUTTON</button>
<button class="buttonN">BUTTON</button>


<h1>回転系</h1>
<button class="buttonO">BUTTON</button>
<button class="buttonP">BUTTON</button>
body {
  background-color: rgba(173,187,0,.2);
}
h1 {
  margin: 20px 20px 10px;
  font-size: 85%;
}

button {
	margin: 0 20px 40px;
	padding: 1em 2em;
	border: none;
  box-sizing:border-box;
  width:150px;
	display: inline-block;
  font-size: 114%;
  position: relative;
	cursor: pointer;
}
button::before,
button::after {
   box-sizing:border-box;
}
/* buttonA */
.buttonA {
  border:3px solid rgb(147,162,0);
  background-color: rgba(147,162,0,1);
  color: #fff;
}
.buttonA:hover {
  border:3px solid rgb(147,162,0);
  background-color: rgba(147,162,0,.0);
  color:  rgba(147,162,0,1);
}

/* buttonB */
.buttonB {
  border:3px solid rgb(147,162,0);
  background-color: rgba(147,162,0,1);
  color: #fff;
  transition: .6s all;
}
.buttonB:hover {
  border:3px solid rgb(147,162,0);
  background-color: rgba(147,162,0,.0);
  color:  rgba(147,162,0,1);
}

/* buttonC */
.buttonC {
  border:3px solid rgba(147,162,0,1);
  background-color: transparent;
  color: #fff;
  transition: .6s all;
  position: relative;
}
.buttonC::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(147,162,0,1);
  position: absolute;
  left: 0;
  top: 0;
  transition: .3s all;
  transform-origin: 50% 50%;
  z-index:-1;
}
.buttonC::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: #FFF;
  position: absolute;
  left: 0;
  top: 0;
  transition: .3s all;
  transform: scale(0);
  transform-origin: 50% 50%;
  opacity: 0;
  z-index:-1;
}
.buttonC:hover {
  color: rgba(147,162,0,1);
}
.buttonC:hover::after {
  transform: scale(1);
  opacity: 1;
}

/* buttonD */
.buttonD {
  border:3px solid rgb(147,162,0);
  background-color: rgba(147,162,0,1);
  color: #fff;
  transition: .6s all;
}
.buttonD:hover {
  transform: scale(1.05,.95);
}

/* buttonE */
.buttonE {
  border:3px solid rgb(147,162,0);
  background-color: rgba(147,162,0,1);
  color: #fff;
  transition: .6s all;
}
.buttonE:hover {
  transform: scale(.95,1.05);
}

/* buttonF */
.buttonF {
  border:3px solid rgb(147,162,0);
  background-color: rgba(147,162,0,1);
  color: #fff;
}
.buttonF:hover {
	animation: poyo2 .8s linear 0s 1 forwards;
	transform-origin: 50% 50%;
}
@keyframes poyo2 {
	  0% { transform: scale(1); }
	 50% { transform: scale(.9); }
	 60% { transform: scale(1.1); }
	 70% { transform: scale(.95); }
	 80% { transform: scale(1.05); }
	 90% { transform: scale(.98); }
	100% { transform: scale(1); }
}


/* buttonG */
.buttonG {
  border:3px solid rgba(147,162,0,1);
  background-color: transparent;
  color: #fff;
  transition: .6s all;
  position: relative;
}
.buttonG::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(147,162,0,1);
  position: absolute;
  left: 0;
  top: 0;
  transition: .3s all;
  transform-origin: 50% 50%;
  z-index:-1;
}
.buttonG::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: #FFF;
  position: absolute;
  left: 0;
  top: 0;
  transition: .3s all;
  transform: scale(1,0);
  transform-origin: 0 50%;
  opacity: 0;
  z-index:-1;
}
.buttonG:hover {
  color: rgba(147,162,0,1);
}
.buttonG:hover::after {
  transform: scale(1,1);
  opacity: 1;
}
/* buttonH */
.buttonH {
  border:3px solid rgba(147,162,0,1);
  background-color: transparent;
  color: #fff;
  transition: .6s all;
  position: relative;
}
.buttonH::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(147,162,0,1);
  position: absolute;
  left: 0;
  top: 0;
  transition: .3s all;
  transform-origin: 50% 50%;
  z-index:-1;
}
.buttonH::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: #FFF;
  position: absolute;
  left: 0;
  top: 0;
  transition: .3s all;
  transform: scale(0,1);
  transform-origin: 50% 50%;
  opacity: 0;
  z-index:-1;
}
.buttonH:hover {
  color: rgba(147,162,0,1);
}
.buttonH:hover::after {
  transform: scale(1,1);
  opacity: 1;
}


/* buttonI */
.buttonI {
  border:3px solid rgba(147,162,0,1);
  background-color: transparent;
  color: #fff;
  transition: .6s all;
  position: relative;
}
.buttonI::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(147,162,0,1);
  position: absolute;
  left: 0;
  top: 0;
  transition: .3s all;
  transform-origin: 50% 0;
  z-index:-1;
}
.buttonI::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: #FFF;
  position: absolute;
  left: 0;
  top: 0;
  transition: .3s all;
  transform: scale(1,0);
  transform-origin: 0 0;
  opacity: 0;
  z-index:-1;
}
.buttonI:hover {
  color: rgba(147,162,0,1);
}
.buttonI:hover::after {
  transform: scale(1,1);
  opacity: 1;
}
/* buttonJ */
.buttonJ {
  border:3px solid rgba(147,162,0,1);
  background-color: transparent;
  color: #fff;
  transition: .6s all;
  position: relative;
}
.buttonJ::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(147,162,0,1);
  position: absolute;
  left: 0;
  top: 0;
  transition: .3s all;
  transform-origin: 50% 100%;
  z-index:-1;
}
.buttonJ::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: #FFF;
  position: absolute;
  left: 0;
  top: 0;
  transition: .3s all;
  transform: scale(1,0);
  transform-origin: 0 100%;
  opacity: 0;
  z-index:-1;
}
.buttonJ:hover {
  color: rgba(147,162,0,1);
}
.buttonJ:hover::after {
  transform: scale(1,1);
  opacity: 1;
}
/* buttonK */
.buttonK {
  border:3px solid rgba(147,162,0,1);
  background-color: transparent;
  color: #fff;
  transition: .6s all;
  position: relative;
}
.buttonK::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(147,162,0,1);
  position: absolute;
  left: 0;
  top: 0;
  transition: .3s all;
  transform-origin: 50% 100%;
  z-index:-1;
}
.buttonK::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: #FFF;
  position: absolute;
  left: 0;
  top: 0;
  transition: .3s all;
  transform: scale(0,1);
  transform-origin: 0 0;
  opacity: 0;
  z-index:-1;
}
.buttonK:hover {
  color: rgba(147,162,0,1);
}
.buttonK:hover::after {
  transform: scale(1,1);
  opacity: 1;
}
/* buttonL */
.buttonL {
  border:3px solid rgba(147,162,0,1);
  background-color: transparent;
  color: #fff;
  transition: .6s all;
  position: relative;
}
.buttonL::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(147,162,0,1);
  position: absolute;
  left: 0;
  top: 0;
  transition: .3s all;
  transform-origin: 50% 100%;
  z-index:-1;
}
.buttonL::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: #FFF;
  position: absolute;
  left: 0;
  top: 0;
  transition: .3s all;
  transform: scale(0,1);
  transform-origin: 100% 0;
  opacity: 0;
  z-index:-1;
}
.buttonL:hover {
  color: rgba(147,162,0,1);
}
.buttonL:hover::after {
  transform: scale(1,1);
  opacity: 1;
}

/* buttonM */
.buttonM {
  border:3px solid rgba(147,162,0,1);
  background-color: transparent;
  color: #fff;
  transition: .6s all;
  position: relative;
  overflow:hidden;
}
.buttonM::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(147,162,0,1);
  position: absolute;
  left: 0;
  top: 0;
  transition: .3s all;
  transform-origin: 50% 50%;
  z-index:-1;
}
.buttonM::after {
  content: '';
  display: block;
  width: 200%;
  height: 300%;
  background-color: #FFF;
  position: absolute;
  left: -210%;
  top: -120%;
  transition: 1s all;
  transform: rotate(8deg);
  transform-origin: 0 50%;
  opacity: .8;
  z-index:-1;
}
.buttonM:hover {
  color: rgba(147,162,0,1);
}
.buttonM:hover::after {
  opacity: 1;
  left: -10%;
  top: -120%;
}

/* buttonN */
.buttonN {
  border:3px solid rgba(147,162,0,1);
  background-color: transparent;
  color: #fff;
  transition: .6s all;
  position: relative;
  overflow:hidden;
}
.buttonN::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(147,162,0,1);
  position: absolute;
  left: 0;
  top: 0;
  transition: .3s all;
  transform-origin: 50% 50%;
  z-index:-1;
}
.buttonN::after {
  content: '';
  display: block;
  width: 200%;
  height: 300%;
  background-color: #FFF;
  position: absolute;
  right: -210%;
  top: -120%;
  transition: 1s all;
  transform: rotate(8deg);
  transform-origin: 0 50%;
  opacity: .8;
  z-index:-1;
}
.buttonN:hover {
  color: rgba(147,162,0,1);
}
.buttonN:hover::after {
  opacity: 1;
  right: -10%;
  top: -120%;
}

/* buttonO */
.buttonO {
  border:3px solid rgba(147,162,0,1);
  background-color: transparent;
  color: #fff;
  transition: .6s all;
  position: relative;
  overflow:hidden;
}
.buttonO::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(147,162,0,1);
  position: absolute;
  left: 0;
  top: 0;
  transition: .4s all;
  transform-origin: 50% 50%;
  z-index:-1;
}
.buttonO::after {
  content: '';
  display: block;
  width: 200%;
  height: 100%;
  background-color: #FFF;
  position: absolute;
  left: -50%;
  top: 0;
  transition: .4s all;
  transform: rotate(-290deg);
  transform-origin: 50% 50%;
  opacity: 0;
  z-index:-1;
}
.buttonO:hover {
  color: rgba(147,162,0,1);
}
.buttonO:hover::after {
  opacity: 1;
  transform: rotate(0);
}

/* buttonP */
.buttonP {
  border:3px solid rgba(147,162,0,1);
  background-color: transparent;
  color: #fff;
  transition: .6s all;
  position: relative;
  overflow:hidden;
}
.buttonP::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(147,162,0,1);
  position: absolute;
  left: 0;
  top: 0;
  transition: .4s all;
  transform-origin: 50% 50%;
  z-index:-1;
}
.buttonP::after {
  content: '';
  display: block;
  width: 200%;
  height: 100%;
  background-color: #FFF;
  position: absolute;
  left: -50%;
  top: 0;
  transition: .4s all;
  transform: rotate(290deg);
  transform-origin: 50% 50%;
  opacity: 0;
  z-index:-1;
}
.buttonP:hover {
  color: rgba(147,162,0,1);
}
.buttonP:hover::after {
  opacity: 1;
  transform: rotate(0);
}


Rerun