.hover-btn {
  display: inline-block;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.hover-btn span {
  position: relative;
  z-index: 2;
  display: flex;
}

.hover-btn::after {
  content: "";
  position: absolute;
  z-index: 1;
}

/* Einblenden von oben */
.hover-effect-1::after { 
  top:0; 
  left:0; 
  width:100%; 
  height:0; 
}
.hover-effect-1:hover::after { 
  height:100%; 
}

/* Einblenden von links */
.hover-effect-2::after { 
  top:0; 
  left:0; 
  width:0;
  height:100%; 
}
.hover-effect-2:hover::after { 
  width:100%; 
}

/* Einblenden von unten */
.hover-effect-3::after { 
  bottom:0; 
  left:0; 
  width:100%; 
  height:0; 
}
.hover-effect-3:hover::after { 
  height:100%; 
}

/* Einblenden von rechts */
.hover-effect-4::after { 
  top:0; 
  right:0; 
  width:0;
  height:100%; 
}
.hover-effect-4:hover::after { 
  width:100%; 
}

/* Diagonal einblenden */
.hover-effect-5::after {
  top:0; 
  left:-100%; 
  width:0; 
  height:100%;
  transform: skew(50deg);
  transform-origin: top left;
}
.hover-effect-5:hover::after { 
  width:200%; 
}

/* Zoom out */
.hover-effect-6::after {
  top:50%; 
  left:50%; 
  width:0; 
  height:0;
  border-radius:50%;
}
.hover-effect-6:hover::after {
  width:200%; 
  height:200%;
  top:-50%; 
  left:-50%;
}