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

@property --g1{
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
@property --g2{
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
@property --g3{
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
@property --g4{
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

 .strange-1 {
  padding-bottom: 8px;
  background:
    linear-gradient(currentColor 0 0) calc(0*100%/3) calc(100% + var(--g1)*1px),
    linear-gradient(currentColor 0 0) calc(1*100%/3) calc(100% + var(--g2)*1px),
    linear-gradient(currentColor 0 0) calc(2*100%/3) calc(100% + var(--g3)*1px),
    linear-gradient(currentColor 0 0) calc(3*100%/3) calc(100% + var(--g4)*1px);
  background-size: 25% 3px;
  background-repeat: no-repeat;
}
.strange-1:hover {
  --g1:-0.05;
  --g2:-0.05;
  --g3:-0.05;
  --g4:-0.05;
  transition:--g1 .15s,--g2 .15s .15s,--g3 .15s .3s,--g4 .15s .45s;
  transition-timing-function: cubic-bezier(0,200,1,200);
 }
 
 .strange-2 {
  padding:15px 10px;
  color:#fff;
  background:
    linear-gradient(#000 0 0) calc(0*100%/3) calc(50% + var(--g1)*1px),
    linear-gradient(#000 0 0) calc(1*100%/3) calc(50% + var(--g2)*1px),
    linear-gradient(#000 0 0) calc(2*100%/3) calc(50% + var(--g3)*1px),
    linear-gradient(#000 0 0) calc(3*100%/3) calc(50% + var(--g4)*1px);
  background-size: 25% calc(100% - 10px);
  background-repeat: no-repeat;
}
.strange-2:hover {
  --g1:-0.05;
  --g2:-0.05;
  --g3:-0.05;
  --g4:-0.05;
  transition:--g1 .15s,--g2 .15s .15s,--g3 .15s .3s,--g4 .15s .45s;
  transition-timing-function: cubic-bezier(0.5,400,0.5,-400);
 }
 .strange-3 {
   padding:10px;
   background:#0000ff;
   color:#fff;
   z-index:0;
 }
 .strange-3:before {
   content:"";
   position:absolute;
   z-index:-1;
   inset:0;
   background:red;
   mix-blend-mode: darken;
   transform:translateX(calc(var(--g1)*1px)) translateY(calc(var(--g2)*1px))
 }
 .strange-3:hover:before {
  --g1:-0.05;
  --g2:-0.05;
  transition:--g1 1s .26s,--g2 1s;
  transition-timing-function: cubic-bezier(0.5,1000,0.5,-1000);
 }
 
 .strange-4 {
   padding:10px;
   background:#0000ff;
   color:#fff;
   z-index:0;
 }
 .strange-4:before,
 .strange-4:after{
   content:"";
   position:absolute;
   z-index:-1;
   inset:0;
   background:#ff0000;
   mix-blend-mode: darken;
   transform:scale(var(--s,1)) translateX(calc(var(--g1)*1px)) translateY(calc(var(--g2)*1px))
 }
 .strange-4:after {
   background:#00ff00;
    --s:-1;
 }
 .strange-4:hover:before,
 .strange-4:hover:after{
  --g1:-0.05;
  --g2:-0.05;
  transition:--g1 1s .26s,--g2 1s;
  transition-timing-function: cubic-bezier(0.5,2000,0.5,-2000);
 }

 .strange-5 {
   padding:0 10px;
   line-height: 1.6em;
 }
 .strange-5:before,
 .strange-5:after{
   content:"";
   position:absolute;
   inset:0;
   border: 3px solid;
   -webkit-mask: repeating-conic-gradient(from var(--d,0deg),#000 0 25%,#0000 0 50%) 0 0/.8em .8em;
 }
 .strange-5:after {
    --d:90deg;
 }
 .strange-5:hover:before {
   transform: translate(0.1px);
  transition:.4s cubic-bezier(0.5,350,0.5,-350);
 }


.strange-6 {
  line-height: 1.6em;
  padding: 0 10px;
  background: 
    linear-gradient(currentColor 0 0) 0 0,
    linear-gradient(currentColor 0 0) 0 0,
    linear-gradient(currentColor 0 0) 100% 100%,
    linear-gradient(currentColor 0 0) 100% 100%;
  background-size: 0 3px,3px 100%;
  background-repeat: no-repeat;
}
.strange-6:hover {
  background-size: 100% 3px,3px 0;
  transition: .5s linear;
}
.strange-6:before,
.strange-6:after {
  content: "";
  position: absolute;
  height: 3px;
  background: currentColor;
  transform: rotate(0);
  width: 100%;
}
.strange-6:before {
  inset: auto auto 0 0;
  transform-origin: 1.5px 50%;
}
.strange-6:after {
  inset: 0 0 auto auto;
  transform-origin: calc(100% - 1.5px) 50%;
}
.strange-6:hover:before,
.strange-6:hover:after {
  width: 1.6em;
  transform: rotate(270deg);
  transition: .5s linear;
}

.strange-7 {
  padding: 10px;
  position: relative;
  z-index: 0;
  color: #fff;
  mix-blend-mode: darken;
}
.strange-7:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -15px -10px;
  padding: 6px;
  background: 
    linear-gradient(#000 0 0) 0    50%,
    linear-gradient(#000 0 0) 50%  50%,
    linear-gradient(#000 0 0) 100% 50%,
    #fff;
  background-size: 34% 80%;
  background-origin: content-box,content-box,content-box,padding-box;
  background-clip: content-box,content-box,content-box,padding-box;
  background-repeat: no-repeat;
  filter: blur(6px) contrast(30);
}
.strange-7:hover:before {
  background-position:0 50.01% ,50% 49.99%, 100% 50.01%;
  transition: .4s cubic-bezier(.5,10000,.5,-10000);
}

.strange-8 {
  padding: 10px;
  position: relative;
  z-index: 0;
  color: #fff;
  mix-blend-mode: darken;
}
.strange-8:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -15px -5px;
  padding: 6px;
  background: 
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0),
    #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 80%,30px 0%,30px 0%;
  background-origin: content-box,content-box,content-box,padding-box;
  background-clip: content-box,content-box,content-box,padding-box;
  filter: blur(6px) contrast(30);
}
.strange-8:hover:before {
  background-size: 100% 80%,30px 100%,30px 100%;
  background-position: center,left -40px top 0,right -40px top 0;
  transition: .3s,background-position .5s .3s linear;
}  

/**/
[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;
}