.ebhe-btn{
  position:relative;
  display:inline-block;
  padding:20px 40px;
  text-decoration:none;
  border:1px solid #000;
  overflow:hidden;
  text-transform:uppercase;
  margin:10px;
  transition:0.4s;
  color:#000;
}

/* Simple fallback hover effects */
.ebhe-btn span{position:relative; z-index:2;}

.ebhe-btn:before,
.ebhe-btn:after{
  content:'';
  position:absolute;
  transition:0.5s;
  z-index:1;
}

/* 0 Swipe */
.btn-0:before{left:0;top:0;bottom:0;width:100%;background:#000;transform:translateX(-100%);}
.btn-0:hover:before{transform:translateX(0);}

/* 1 Diagonal Swipe */
.btn-1:before{
  width:120%;
  height:120%;
  background:#000;
  transform:translate(-120%,-120%) rotate(45deg);
}
.btn-1:hover:before{transform:translate(0,0) rotate(45deg);}

/* 6 Position aware */
.btn-6 span{
  position:absolute;
  width:0;height:0;
  border-radius:50%;
  background:#000;
  transform:translate(-50%,-50%);
  z-index:0;
  transition:width .4s,height .4s;
}
.btn-6:hover span{
  width:300px;
  height:300px;
}