<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>

.fancy-1 {
  padding:8px;
  box-shadow:var(--d,100vmax) 0 #000;
  background:linear-gradient(#000 0 0) var(--d,100vmax) 0/100% 100% no-repeat;
  transition:0.2s linear,background-position 0.5s 0.2s linear,box-shadow 0.5s 0.2s linear;
}
.fancy-1:hover {
  --d:0px;
  color:#fff;
  transition:0.5s linear,color 0.2s 0.4s linear;
 }

.fancy-2 {
  padding:8px;
  background:
    radial-gradient(circle closest-side,#000 97%,#0000) center;
  background-size:0 0;
  background-repeat:no-repeat;
  transition:0.5s;
}
.fancy-2:hover {  
  background-size:300px 300px;
  color:#fff;
 }

.fancy-3 {
  padding:8px;
  box-shadow:0 100vmax #0000;
  background:linear-gradient(#000 0 0) 0 var(--d,100vmax)/100% 100% no-repeat;
  transition:0.2s linear,background-position 0.5s 0.2s ease-in,box-shadow 0.5s 0.2s ease-in;
}
.fancy-3:hover {
  --d:0px;
  box-shadow:0 0 #000;
  color:#fff;
  transition:0.5s ease-out,color 0.2s 0.4s linear;
 }
 
.fancy-4 {
  padding:8px;
  box-shadow:
    0 var(--d, 100vmax) #000,
    0 var(--d,-100vmax) #000;
  clip-path:inset(calc(101% - 100vmax) 0);
  background:
    linear-gradient(  0deg,#000 51%,#0000 0) 0 var(--d, 100vmax)/100% 100% no-repeat,
    linear-gradient(180deg,#000 51%,#0000 0) 0 var(--d,-100vmax)/100% 100% no-repeat;
  transition:0.2s linear,background-position 0.5s 0.2s ease-in,box-shadow 0.5s 0.2s ease-in;
}
.fancy-4:hover {
  --d:0px;
  color:#fff;
  transition:0.5s ease-out,color 0.2s 0.4s linear;
 }
 
.fancy-5 {
  padding:8px;
  background:
    radial-gradient(farthest-side at top   left  ,#000 97%,#0000) top    left,
    radial-gradient(farthest-side at top   right ,#000 97%,#0000) top    right,
    radial-gradient(farthest-side at bottom left ,#000 97%,#0000) bottom left,
    radial-gradient(farthest-side at bottom right,#000 97%,#0000) bottom right;
  background-size:0 0;
  background-repeat:no-repeat;
  transition:0.5s;
}
.fancy-5:hover {  
  background-size:100% 100%;
  color:#fff;
 }

 .fancy-6 {
  padding:8px;
  box-shadow:0 0 0 100vmax #0000;
  clip-path:circle(71%);
  transition:0.5s;
}
.fancy-6:hover {
  color:#fff;
  background:#000;
  box-shadow:0 0 0 100vmax #000;
 }
 
.fancy-7 {
  padding:8px;
  background:
    conic-gradient(from  90deg at 50% calc(100% - 10px),#0000 90deg,#000 0) 0  200% /20px 200%,
    conic-gradient(from -90deg at 50% 10px             ,#0000 90deg,#000 0) 0 -100% /20px 200%;
  background-repeat:repeat-x;
  transition:0.5s;
}
.fancy-7:hover {  
  background-position:0 calc(150% + 10px),0 calc(-50% - 10px);
  color:#fff;
 }

	/**/
[class] {
  display:inline-block;
  vertical-align: middle;
  font-size:40px;
  font-family:sans-serif;
  margin:25px;
  cursor:pointer;
}

body {
  text-align:center;
}