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

.transformed-1 {
  box-shadow:0 0 currentColor;
  transition:0.5s linear;
}
.transformed-1:hover {  
  box-shadow:0 8px currentColor;
  transform:translateY(-8px);
 }

.transformed-2 {
  padding:0 5px;
  box-shadow:0 0 currentColor;
  transition:0.5s linear;
}
.transformed-2:hover {  
  box-shadow:-8px 8px currentColor;
  transform:translate(8px,-8px);
 }

.transformed-3 {
  box-shadow:0 40px #0000;
  clip-path:polygon(0 0,100% 0,100% 100%,100% 100%,0 100%);
  transform-origin:bottom left;
  transition:0.5s linear,box-shadow 0s 0.5s;
}
.transformed-3:hover {  
  box-shadow:0 40px currentColor;
  clip-path:polygon(0 0,100% 0,100% 100%,calc(100% - 2px) calc(100% + 21.5px),0 100%); 
  transform:rotate(-6deg);
  transition:0.5s linear,box-shadow 0s;
 }
 
.transformed-4 {
  box-shadow:0 40px #0000;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 100%);
  transform-origin:bottom right;
  transition:0.5s linear,box-shadow 0s 0.5s;
}
.transformed-4:hover {  
  box-shadow:0 40px currentColor;
  clip-path:polygon(0 0,100% 0,100% 100%,2px calc(100% + 21.5px),0 100%); 
  transform:rotate(6deg);
  transition:0.5s linear,box-shadow 0s;
 }
 
.transformed-5 {
  box-shadow: 0 0 0 100vmax currentColor;
  clip-path: inset(1px 1px);
  transition:0.5s linear,clip-path 0.5s ease-out;
}
.transformed-5:hover { 
  clip-path: inset(-7px -33px);
  transform:perspective(100px) translateZ(-30px);
  transition:0.5s linear,clip-path 0.5s ease-in;
 }
 
.transformed-6 {
  box-shadow:0 40px currentColor,0 -40px currentColor;
  clip-path:polygon(0 1px,50% 1px,100% 1px,100% calc(100% - 1px),50% calc(100% - 1px),0 calc(100% - 1px));
  transition:0.5s linear;
}
.transformed-6:hover {  
  clip-path:polygon(0 calc(-38.43px/2),50% 1px,100% 1px,100% calc(100% + 38.43px/2),50% calc(100% - 1px),0 calc(100% - 1px)); 
  transform:skewY(-10deg);
 }
 
.transformed-7 {
  box-shadow:0 40px currentColor,0 -40px currentColor;
  clip-path:polygon(0 1px,50% 1px,100% 1px,100% calc(100% - 1px),50% calc(100% - 1px),0 calc(100% - 1px));
  transition:0.5s linear;
}
.transformed-7:hover {  
  clip-path:polygon(0 1px,50% 1px,100% calc(-38.43px/2),100% calc(100% - 1px),50% calc(100% - 1px),0 calc(100% + 38.43px/2)); 
  transform:skewY(10deg);
 }

/**/
[class] {
  display:inline-block;
  vertical-align: middle;
  font-size:40px;
  font-family:sans-serif;
  margin:25px;
  cursor:pointer;
}
body > [class]:nth-child(odd) {
  color:darkblue;
}
body {
  text-align:center;
}