<div class="fancy-1">1. Hover me</div>
<div class="fancy-2">2. Hover me</div>
<div class="fancy-3">3. Hover me</div>
<div class="fancy-4">4. Hover me</div>
<div class="fancy-5">5. Hover me</div>
<div class="fancy-6">6. Hover me</div>
<div class="fancy-7">7. Hover me</div>
<div class="fancy-8">8. Hover me</div>

.fancy-1 {
  padding: 10px;
  z-index: 0;
  transition: .4s;
}
.fancy-1:hover {
  color: #fff;
}
.fancy-1:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: #000;
  transform: rotate(450deg) scale(0);
  transition: .4s;
}
.fancy-1:hover:before {
  transform: rotate(0deg) scale(1);
}


.fancy-2 {
  padding: 10px;
  z-index: 0;
  transition: .4s;
}
.fancy-2:hover {
  color: #fff;
}
.fancy-2:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: #000;
  opacity: 0;
  transform: translate(-50%,-100%) rotate(-90deg);
  transition: .4s,transform 0s .4s;
}
.fancy-2:hover:before {
  transform: translate(0,0) rotate(0deg);
  opacity: 1;
  transition: .4s;
}


.fancy-3 {
  padding: 10px;
  z-index: 0;
  transition: .4s;
}
.fancy-3:hover {
  color: #fff;
}
.fancy-3:before,
.fancy-3:after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 50% 0 0;
  background: #000;
  transform: rotate(450deg) scale(0);
  transition: .4s;
}
.fancy-3:after {
  inset: 0 0 0 50%;
  transform: rotate(-450deg) scale(0);
}
.fancy-3:hover:before,
.fancy-3:hover:after {
  transform: rotate(0deg) scale(1);
}


.fancy-4 {
  padding: 10px;
  z-index: 0;
  transition: .4s;
}
.fancy-4:hover {
  color: #fff;
}
.fancy-4:before,
.fancy-4:after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 50% 0 0;
  background: #000;
  opacity: 0;
  transform: translate(-100%,-100%) rotate(-90deg);
  transition: .4s,transform 0s .4s;
}
.fancy-4:after {
  inset: 0 0 0 50%;
  transform: translate(100%,-100%) rotate(90deg);
}
.fancy-4:hover:before,
.fancy-4:hover:after {
  transform: translate(0,0) rotate(0deg);
  opacity: 1;
  transition: .4s;
}


.fancy-5 {
  padding: 10px;
  z-index: 0;
  transition: .4s;
}
.fancy-5:hover {
  color: #fff;
}
.fancy-5:before,
.fancy-5:after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: #000;
  opacity: 0;
  clip-path: polygon(0 0,100% 0,0 100%);
  transform: translate(-10%,-50%) rotate(-90deg);
  transform-origin: left;
  transition: .4s,transform 0s .4s;
}
.fancy-5:after {
  clip-path: polygon(100% 100%,100% 0,0 100%);
  transform: translate(10%,50%) rotate(-90deg);
  transform-origin: right;
}
.fancy-5:hover:before,
.fancy-5:hover:after {
  transform: translate(0,0) rotate(0deg);
  opacity: 1;
  transition: .4s;
}


.fancy-6 {
  padding: 10px;
  z-index: 0;
  transition: .4s;
}
.fancy-6:hover {
  color: #fff;
}
.fancy-6:before,
.fancy-6:after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 50% 0 0;
  background: #000;
  opacity: 0;
  transform: translateY(-300%);
  transition: .4s,transform 0s .4s;
}
.fancy-6:after {
  inset: 0 0 0 50%;
  transform: translateY(300%);
}
.fancy-6:hover:before,
.fancy-6:hover:after {
  transform: translateY(0);
  opacity: 1;
  transition: .4s,transform .4s cubic-bezier(0,.5,.5,1.5);
}


.fancy-7 {
  padding: 10px;
  z-index: 0;
  transition: .4s;
}
.fancy-7:hover {
  color: #fff;
}
.fancy-7:before,
.fancy-7:after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: #000;
  opacity: 0;
  transform: rotate(-25deg);
  transform-origin: left;
  clip-path: inset(0 0 50% 0);
  transition: .4s,transform 0s .4s;
}
.fancy-7:after {
  clip-path: inset(50% 0 0 0);
  transform: rotate(25deg);
}
.fancy-7:hover:before,
.fancy-7:hover:after {
  transform:rotate(0deg);
  opacity: 1;
  transition: .4s;
}


.fancy-8 {
  padding: 10px;
  z-index: 0;
  transition: .4s;
}
.fancy-8:hover {
  color: #fff;
}
.fancy-8:before,
.fancy-8:after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 50% 0;
  background: 
    linear-gradient(90deg,#000 10%,#0000 0 20%,#000 0 80%,#0000 0 90%,#000 0) bottom/100% 60%,
    linear-gradient(#000 0 0) top/100% 40%;
  background-repeat: no-repeat;
  opacity: 0;
  transform: translateY(-150%);
  transition: .4s,transform 0s .4s;
}
.fancy-8:after {
  inset: 19% 0 0 0;
  background: 
    linear-gradient(90deg,#0000 10%,#000 0 20%,#0000 0 80%,#000 0 90%,#0000 0) top/100% 37.5%,
    linear-gradient(#000 0 0) bottom/100% 62.5%;
  background-repeat: no-repeat;
  transform: translateY(60%);
}
.fancy-8:hover:before,
.fancy-8:hover:after {
  transform:translateY(0);
  opacity: 1;
  transition: .4s;
}

/**/
[class] {
  display:inline-block;
  font-size:40px;
  font-family:sans-serif;
  margin:25px;
  cursor:pointer;
  position: relative;
}
[class]:before,
[class]:after {
  pointer-events: none;
}

body {
  text-align:center;
  overflow:hidden;
}