<div class="unexpected-2">1. Hover me </div>
<div class="unexpected-4">2. Hover me </div>
<div class="buggy-1">3. Hover me </div>
<div class="area-4">4. Hover me </div>
<div class="morphing-1">5. Hover me </div>
<div class="arcade-4">6. Hover me </div>

.unexpected-2 {
  font-family:sans-serif;
  padding-bottom:8px;
  background: 
    linear-gradient(currentColor 0 0) left  var(--p, 50%) bottom 0 /var(--d, 10%) 3px no-repeat,
    linear-gradient(currentColor 0 0) right var(--p, 50%) bottom 0 /var(--d, 10%) 3px no-repeat;
  transition: 0.3s, background-position 0.3s 0.3s;
}

.unexpected-2:hover {
  --d: 50%;
  --p: 50.1%;
  transition: cubic-bezier(0, 500, 1, 500) 0.3s, background-size 0.3s 0.3s;
}

.unexpected-4 {
  font-family:sans-serif;
  padding-bottom:8px;
  clip-path:polygon(1px 1px,calc(100% - 1px) 1px,calc(100% - 1px) calc(100% - 1px),
    calc(50% - 10px + var(--d,0px)) calc(100% - 1px),
    calc(50% - 10px + var(--d,0px)) calc(100% + 3px),
    calc(50% + 10px + var(--d,0px)) calc(100% + 3px),
    calc(50% + 10px + var(--d,0px)) calc(100% - 1px),1px calc(100% - 1px));
  box-shadow:0 0px 0px 100vmax currentColor;
  transition:0s;
}
.unexpected-4:hover {
  --d:1px;
  transition:0.5s cubic-bezier(.5, -700, .5, 700);
}

.area-4 {
  font-family:sans-serif;
  text-shadow: 
    0 0 0 rgb(255,0,0), 
    0 0 0 rgb(0,255,0), 
    0 0 0 rgb(0,0,255);
}
.area-4:hover {
  text-shadow: 
    0.3px -0.1px 0.1px rgb(255,0,0), 
    0.2px 0.1px 0 rgb(0,255,0), 
    -0.1px 0.2px 0 rgb(0,0,255);
  transition: 0.2s cubic-bezier(0.5,200,0.5,-200);
}

.buggy-1 {
  font-family:sans-serif;
  position: relative;
  white-space: nowrap;
  left:0px;
  bottom:0px;
  top:0px; 
}
 .buggy-1:hover {
   left:0.1px;
   transform: translateY(0.1px);
   top:0.1px;
   transition: 
      left      0.2s,
      top       0.2s 0.2s,
      transform 0.2s 0.4s;
  transition-timing-function: cubic-bezier(0.5,-300,0.5,300);
 }
 .morphing-1 {
   font-family:sans-serif;
   padding:8px;
   box-shadow:0 0 0px 80px var(--c,#0000);
   background:var(--c,#0000);
   transition: 0.3s,clip-path 0s;
   clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
 }
 .morphing-1:hover {
  --c:#000;
  color:#fff;
  transition: 0.3s,clip-path cubic-bezier(.5,150,.5,-150) 0.4s 0.3s; 
  clip-path: polygon(0.5px 0,calc(100% + 0.5px) 0,calc(100% - 0.5px) 100%,-0.5px 100%);
 }
 .arcade-4 {
   font-family:sans-serif;
   padding:8px 8px 90px;
   clip-path: inset(0 0 40px 0);
   color:#fff;
   box-shadow:0 calc(1.2em + 16px) 0 inset #000;
  --x:0px;
  background:
linear-gradient(90deg,#0000 12px,#f92033 0 22px,#0000 0 26px,#fdc98d 0 32px,#0000) bottom calc(26px + var(--x)) left 50%,
linear-gradient(90deg,#0000 10px,#f92033 0 28px,#fdc98d 0 32px,#0000 0) bottom calc(24px + var(--x)) left 50%,
linear-gradient(90deg,#0000 10px,#643700 0 16px,#fdc98d 0 20px,#000 0 22px,#fdc98d 0 24px,#000 0 26px,#f92033 0 32px,#0000 0) bottom calc(22px + var(--x)) left 50%,
linear-gradient(90deg,#0000 8px,#643700 0 10px,#fdc98d 0 12px,#643700 0 14px,#fdc98d 0 20px,#000 0 22px,#fdc98d 0 28px,#f92033 0 32px,#0000 0) bottom calc(20px + var(--x)) left 50%,
linear-gradient(90deg,#0000 8px,#643700 0 10px,#fdc98d 0 12px,#643700 0 16px,#fdc98d 0 22px,#000 0 24px,#fdc98d 0 30px,#f92033 0 32px,#0000 0) bottom calc(18px + var(--x)) left 50%,
linear-gradient(90deg,#0000 8px,#643700 0 12px,#fdc98d 0 20px,#000 0 28px,#f92033 0 30px,#0000 0) bottom calc(16px + var(--x)) left 50%,
linear-gradient(90deg,#0000 12px,#fdc98d 0 26px,#f92033 0 30px,#0000 0) bottom calc(14px + var(--x)) left 50%,
linear-gradient(90deg,#fdc98d 6px,#f92033 0 14px,#222a87 0 16px,#f92033 0 22px,#222a87 0 24px,#f92033 0 28px,#0000 0 32px,#643700 0) bottom calc(12px + var(--x)) left 50%,
linear-gradient(90deg,#fdc98d 6px,#f92033 0 16px,#222a87 0 18px,#f92033 0 24px,#f92033 0 26px,#0000 0 30px,#643700 0) bottom calc(10px + var(--x)) left 50%,
linear-gradient(90deg,#0000 10px,#f92033 0 16px,#222a87 0 24px,#feee49 0 26px,#222a87 0 30px, #643700 0) bottom calc(8px + var(--x)) left 50%,
linear-gradient(90deg,#0000 12px,#222a87 0 18px,#feee49 0 20px,#222a87 0 30px,#643700 0) bottom calc(6px + var(--x)) left 50%,
linear-gradient(90deg,#0000 8px,#643700 0 12px,#222a87 0 30px,#643700 0) bottom calc(4px + var(--x)) left 50%,
linear-gradient(90deg,#0000 6px,#643700 0 14px,#222a87 0 26px,#0000 0) bottom calc(2px + var(--x)) left 50%,
linear-gradient(90deg,#0000 6px,#643700 0 10px,#0000 0 ) bottom calc(0px + var(--x)) left 50%;

background-size: 34px 2px;
background-repeat: no-repeat;
   transition: color 0.3s,box-shadow 0.3s; 
 }

 .arcade-4:hover {
   background-size:0 0;
   color:#000;
   --x:0.5px;
   box-shadow:0 0 0 inset #000;
   transition: 1s 0.2s cubic-bezier(1,150,0.5,150),background-size 0s 1.2s,color 0.2s 1s,box-shadow 0.2s 1s; 
 }

/**/
div[class] {
  display:inline-block;
  font-size:40px;
  margin:25px;
  cursor:pointer;
}
body {
  text-align:center;
}