cssbuttonhover.css

.buttonfx{
  color: black; /* button text color */
  outline: none;
  background: transparent;
  border: none;
  border-bottom: 4px solid #eee;
  letter-spacing: 0.0625em;
  padding: 8px 10px; 
  text-transform: uppercase;
  font: bold 16px 'Bitter', sans-serif; /* use google font */
  line-height: 2;
  position: relative;
	display: inline-block;
  margin-right: 20px;
  margin-bottom: 20px;
  cursor: pointer;
	text-decoration: none; /* remove underline if using A instead of BUTTON tag */
  overflow: hidden;
  transition: all .5s;
}

/* //// Default effect: Slide from Top  //// */

.buttonfx:before,
.buttonfx:after{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background: #259f6c; /* onhover background color */
  z-index: -1;
  transform: translate3D(0,-100%,0); /* move elements above button so they don't appear initially */
  transition: all .5s;
}

.buttonfx:before{
  background: #fafcd6; /* button default background color */
  z-index: -2;
  transform: translate3D(0,0,0);
}

.buttonfx:hover{
	color: white;
}

.buttonfx:hover:after{
  transform: translate3D(0,0,0);
  transition: all .5s;
}

/* //// Slide Left  //// */

.slideleft:after{
  top: 0;
  z-index: -1;
  transform: translate3D(-101%,0,0);
}

.slideleft:hover:after{
  transform: translate3D(0,0,0);
  transition: all .5s;
}

/* //// Slide Corner  //// */

.slidebottomleft:after{
  transform: translate3D(-100%,100%,0);
}

.slidebottomleft:hover:after{
	transform: translate3D(0,0,0);
  transition: all .5s;
}

/* //// Angle In  //// */


.angleinleft:after{
  width: 200%;
  transform-origin: 0 bottom;
  transform: translate3D(-50%,0,0) rotate(-50deg);
}

.angleinleft:hover:after{
  transform: rotate(0deg);
  transition: all .5s;
}

/* //// Curtain Down  //// */

.curtaindown{
  border: 1px solid #eee;
  border-bottom: 4px solid #eee;
}

.curtaindown:before,
.curtaindown:after{
  background: #259f6c;
  transform: translate3D(0,-100%,0);
}

.curtaindown:after{
  transform: translate3D(0,100%,0);
}

.curtaindown:hover:before,
.curtaindown:hover:after{
  transform: translate3D(0,-50%,0);
  transition: all .5s;
}

.curtaindown:hover:after{
  transform: translate3D(0,50%,0);
}

/* //// Curtain Up  //// */

.curtainup{
  transform-style: preserve-3d;
}

.curtainup:before,
.curtainup:after{
  transform-origin: center center;
  transform: scale(1,0);
}


.curtainup:hover:before,
.curtainup:hover:after{
  transform: scale(1);
  border-radius: 0;
}

/* //// Double Angle In  //// */

.angleindouble{
  border: 1px solid #eee;
  border-bottom: 4px solid #eee;
}

.angleindouble:before{
  top: 0;
  left: 0;
  width: 150%;
  background: #259f6c;
  transform-origin: 0 bottom;
  transform:  translateX(-100%) rotate(-30deg);
}

.angleindouble:after{
  top: 0;
  left: auto;
  right: 0;
  width: 150%;
  transform-origin: right bottom;
  transform: translateX(100%) rotate(30deg);
}

.angleindouble:hover:before{
  left: 0;
  transform: rotate(0deg);
  transition: all .5s;
}

.angleindouble:hover:after{
  right: 0;
  transform: rotate(0deg);
  transition: all .5s;
}


/* //// Double Take  //// */

.doubletake:before,
.doubletake:after{
  width: 200%;
  background: #259f6c;
  transform-origin: 0 bottom;
  transform: translate3D(-50%,0,0) rotate(-50deg);
}

.doubletake:before{
  opacity: .4;
}

.doubletake:hover:before,
.doubletake:hover:after{
  transform: rotate(0deg);
  transition: all .25s;
}

.doubletake:hover:after{
  transition-delay: .25s;
}


/* #### Bounce classes #### */

.bouncein:hover:before,
.bouncein:hover:after{
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66) !important;
}