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

 .sides-1 {
  padding: 10px;
  background:
    linear-gradient(currentColor 0 0) 50% 6px,
    linear-gradient(currentColor 0 0) 6px 50%,
    linear-gradient(currentColor 0 0) 50% calc(100% - 6px),
    linear-gradient(currentColor 0 0) calc(100% - 6px) 50%;
  background-size: 0% 2px,2px 0%;
  background-repeat: no-repeat;
  transition: 0.5s;
}
.sides-1:hover {
  background-size: 100% 2px,2px 100%;
}

 .sides-2 {
  padding: 10px;
  background:
    linear-gradient(currentColor 0 0) 50% var(--d,0px),
    linear-gradient(currentColor 0 0) var(--d,0px) 50%,
    linear-gradient(currentColor 0 0) 50% calc(100% - var(--d,0px)),
    linear-gradient(currentColor 0 0) calc(100% - var(--d,0px)) 50%;
  background-size: 100% 2px,2px 100%;
  background-repeat: no-repeat;
  transition: 0.5s;
}
.sides-2:hover {
  --d:6px;
}

 .sides-3 {
  --b:2px;
  --s:10px;
  padding: 10px;
  background:
    linear-gradient(currentColor 0 0) 0 0      /var(--d,0) var(--b),
    linear-gradient(currentColor 0 0) 0 0      /var(--b) var(--d,0),
    linear-gradient(currentColor 0 0) 100% 100%/var(--d,0) var(--b),
    linear-gradient(currentColor 0 0) 100% 100%/var(--b) var(--d,0),
  
    linear-gradient(currentColor 0 0) left var(--s) bottom var(--p,calc(-1*var(--s))) /var(--b) var(--s),
    linear-gradient(currentColor 0 0) left var(--p,calc(-1*var(--s))) bottom var(--s)/var(--s) var(--b),

    linear-gradient(currentColor 0 0) right var(--s) top var(--p,calc(-1*var(--s))) /var(--b) var(--s),
    linear-gradient(currentColor 0 0) right var(--p,calc(-1*var(--s))) top var(--s) /var(--s) var(--b);
  background-repeat: no-repeat;
  transition: 0.2s linear,background-size 0.4s 0.2s;
}
.sides-3:hover {
  --d:calc(100% - var(--s));
  --p:var(--b);
  transition: 0.4s,background-position 0.2s 0.4s linear;
}

 .sides-4 {
  --b:2px;
  --s:10px;
  padding: 10px;
  background:
    linear-gradient(currentColor 0 0) top   /var(--d,0) var(--b),
    linear-gradient(currentColor 0 0) bottom/var(--d,0) var(--b),
    linear-gradient(currentColor 0 0) left  /var(--b) var(--d,0),
    linear-gradient(currentColor 0 0) right /var(--b) var(--d,0),
  
    linear-gradient(currentColor 0 0) left var(--s) top var(--p,calc(-1*var(--s)))  /var(--b) var(--s),
    linear-gradient(currentColor 0 0) left var(--p,calc(-1*var(--s))) top var(--s)  /var(--s) var(--b),

    linear-gradient(currentColor 0 0) left var(--s) bottom var(--p,calc(-1*var(--s))) /var(--b) var(--s),
    linear-gradient(currentColor 0 0) left var(--p,calc(-1*var(--s))) bottom var(--s)/var(--s) var(--b),

    linear-gradient(currentColor 0 0) right var(--s) bottom var(--p,calc(-1*var(--s))) /var(--b) var(--s),
    linear-gradient(currentColor 0 0) right var(--p,calc(-1*var(--s))) bottom var(--s) /var(--s) var(--b),

    linear-gradient(currentColor 0 0) right var(--s) top var(--p,calc(-1*var(--s))) /var(--b) var(--s),
    linear-gradient(currentColor 0 0) right var(--p,calc(-1*var(--s))) top var(--s) /var(--s) var(--b);
  background-repeat: no-repeat;
  transition: 0.2s linear,background-size 0.4s 0.2s;
}
.sides-4:hover {
  --d:calc(100% - 2*var(--s));
  --p:var(--b);
  transition: 0.4s,background-position 0.2s 0.4s linear;
}

 .sides-5 {
  --b:2px;
  --s:8px;
  padding: 10px;
  background:
    linear-gradient(currentColor 0 0) 0 0      /var(--d,0) var(--b),
    linear-gradient(currentColor 0 0) 0 0      /var(--b) var(--d,0),
    linear-gradient(currentColor 0 0) 100% 100%/var(--d,0) var(--b),
    linear-gradient(currentColor 0 0) 100% 100%/var(--b) var(--d,0),


    linear-gradient(currentColor 0 0) top var(--s)    left  var(--s)/var(--d,0) var(--b),
    linear-gradient(currentColor 0 0) top var(--s)    left  var(--s)/var(--b) var(--d,0),
    linear-gradient(currentColor 0 0) bottom var(--s) right var(--s)/var(--d,0) var(--b),
    linear-gradient(currentColor 0 0) bottom var(--s) right var(--s)/var(--b) var(--d,0);
  ;
  background-repeat: no-repeat;
  transition: 0.5s;
}
.sides-5:hover {
  --d:calc(100% - var(--s));
}

.sides-6 {
  --b:2px;
  --s:8px;
  padding: 10px;
  background:
    linear-gradient(currentColor 0 0) var(--x,calc(var(--s)/2)) var(--x,calc(var(--s)/2)) /var(--d,0) var(--b),
    linear-gradient(currentColor 0 0) var(--x,calc(var(--s)/2)) var(--x,calc(var(--s)/2)) /var(--b) var(--d,0),
    linear-gradient(currentColor 0 0) bottom var(--x,calc(var(--s)/2)) right var(--x,calc(var(--s)/2))/var(--d,0) var(--b),
    linear-gradient(currentColor 0 0) bottom var(--x,calc(var(--s)/2)) right var(--x,calc(var(--s)/2))/var(--b) var(--d,0),


    linear-gradient(currentColor 0 0) var(--y,calc(var(--s)/2)) var(--y,calc(var(--s)/2))/var(--d,0) var(--b),
    linear-gradient(currentColor 0 0) var(--y,calc(var(--s)/2)) var(--y,calc(var(--s)/2))/var(--b) var(--d,0),
    linear-gradient(currentColor 0 0) bottom var(--y,calc(var(--s)/2)) right var(--y,calc(var(--s)/2))/var(--d,0) var(--b),
    linear-gradient(currentColor 0 0) bottom var(--y,calc(var(--s)/2)) right var(--y,calc(var(--s)/2))/var(--b) var(--d,0);
  ;
  background-repeat: no-repeat;
  transition: 0.3s,background-size 0.5s 0.3s;
}
.sides-6:hover {
  --d:calc(100% - var(--s));
  --x:0;
  --y:var(--s);
  transition: 0.5s,background-position 0.3s 0.5s;
}

 .sides-7 {
  --b:2px;
  padding: 10px;
  background:
    linear-gradient(currentColor 0 0) top   /var(--d,0) var(--b),
    linear-gradient(currentColor 0 0) bottom/var(--d,0) var(--b),
    linear-gradient(currentColor 0 0) left  /var(--b) var(--d,0),
    linear-gradient(currentColor 0 0) right /var(--b) var(--d,0);
  outline:var(--b) solid #0000;
  outline-offset: calc(-1*var(--b));
  background-repeat: no-repeat;
  transition: 0.3s,outline-color 0s 0.2s ,background-size 0.4s 0.3s linear;
}
.sides-7:hover {
  --d:100%;
  outline-color: currentColor;
  outline-offset: 8px;
  transition: 0.4s,outline-color 0s 0.4s,outline-offset 0.3s 0.4s linear;
}

 .sides-8 {
  --b:2px;
  --w:0px;
  padding: 10px;
  border:var(--b) solid var(--c,#0000);
  box-shadow: 0 0 0 100px var(--c,#0000);
  clip-path: polygon(0 var(--w),var(--b) var(--w),var(--b) 0,calc(100% - var(--w)) 0,calc(100% - var(--w)) var(--b),100% var(--b),100% calc(100% - var(--w)),calc(100% - var(--b)) calc(100% - var(--w)),calc(100% - var(--b)) 100%,var(--w) 100%,var(--w) calc(100% - var(--b)),0 calc(100% - var(--b)));
  transition: 0.3s 0.3s,clip-path 0.3s;
  }
.sides-8:hover {
  --c:#000;
  --w:-50px;
  transition: 0.3s,clip-path 0.3s 0.3s;
}

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

body {
  text-align:center;
}