Facebook Instagram YouTube WhatsApp LinkedIn
We use cookies to ensure that we give you the best experience on our website.

CSS Underline or Overlay Animations with ultimate CSS Collection.

CSS Underline or Overlay Animations with ultimate CSS Collection
Share Your Love

Here I am going to discuss how differently design CSS navbar animations with CSS Underline or Overlay effect. Here we are using simple CSS code to affect navbar elements.

No SVG,  No JS, No extra tag, No pseudo-element, No keyframes all of them are done using backgrounds, transition and only one element. Simply add a class and see the result.

  1. The Basic Effect:
  2. The Continuous:
  3. The Two Steps:
  4. The Unexpected:
  5. The Rounded:
  6. The Infinite:
  7. The Thick:
  8. The Sliding:
  9. The Fancy:

The Basic Effect:

<div class="basic-0">0. Hover me </div>
<div class="basic-1">1. Hover me </div>
<div class="basic-2">2. Hover me </div>
<div class="basic-3">3. Hover me </div>
<div class="basic-4">4. Hover me </div>
<div class="basic-5">5. Hover me </div>
<div class="basic-6">6. Hover me </div>
.basic-0 {
  background: 
      linear-gradient(currentColor 0 0) 
      0 100% /var(--d, 0) 3px 
      no-repeat;
}
.basic-0:hover {
  --d: 100%;
}

.basic-1 {
  background: 
      linear-gradient(currentColor 0 0) 
      0 100% /var(--d, 0) 3px 
    no-repeat;
  transition:0.5s;
}
.basic-1:hover {
  --d: 100%;
}

.basic-2 {
  background: 
      linear-gradient(currentColor 0 0) 
      100% 100% /var(--d, 0) 3px 
      no-repeat;
  transition:0.5s;
}
.basic-2:hover {
  --d: 100%;
}

.basic-3 {
  background: 
      linear-gradient(currentColor 0 0) 
      bottom /var(--d, 0) 3px 
      no-repeat;
  transition:0.5s;
}
.basic-3:hover {
  --d: 100%;
}

.basic-4 {
  background: 
      linear-gradient(currentColor 0 0) 
      var(--p, 0) 100% /var(--d, 0) 3px 
      no-repeat;
  transition: 0.3s, background-position 0s 0.3s;
}
.basic-4:hover {
  --d: 100%;
  --p: 100%;
}

.basic-5 {
  background: 
      linear-gradient(currentColor 0 0) 
      var(--p, 100%) 100% /var(--d, 0) 3px 
      no-repeat;
  transition: 0.3s, background-position 0s 0.3s;
}
.basic-5:hover {
  --d: 100%;
  --p: 0%;
}

.basic-6 {
  background: 
      linear-gradient(currentColor 0 0) 
      bottom /var(--d, 20%) 3px 
      no-repeat;
  transition:0.5s;
}
.basic-6:hover {
  --d: 80%;
}

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

The Continuous:

<div class="continuous-1">1. Hover me </div>
<div class="continuous-2">2. Hover me </div>
<div class="continuous-3">3. Hover me </div>
<div class="continuous-4">4. Hover me </div>
<div class="continuous-5">5. Hover me </div>
<div class="continuous-6">6. Hover me </div>
<div class="continuous-7">7. Hover me </div>
<div class="continuous-8">8. Hover me </div>
.continuous-1 {
  background: 
      linear-gradient(currentColor 0 0) 
      var(--d, 201%) 100% /200% 3px 
      no-repeat;
  transition:0.5s;
}
.continuous-1:hover {
  --d: -101%;
}

.continuous-2 {
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 10px), currentColor 0 calc(25% + 10px), transparent 0 50%) 
    bottom right /200% 3px 
    no-repeat;
  transition:0.5s;
}
.continuous-2:hover {
  background-position: bottom left;
}

.continuous-3 {
  background: 
     linear-gradient(90deg, currentColor calc(100%/3), transparent 0 calc(200%/3), currentColor 0) 
     var(--d, 0%) 100% /300% 3px 
    no-repeat;
  transition:0.5s;
}
.continuous-3:hover {
  --d: 100%;
}

.continuous-4 {
  background: 
     linear-gradient(90deg, transparent calc(100%/4), currentColor 0 calc(300%/4), transparent 0) 
     var(--d,100%) 100% /200% 3px 
    repeat-x;
  transition:0.5s;
}
.continuous-4:hover {
  --d: -100%;
}

.continuous-5 {
  background: 
     linear-gradient(currentColor 0 0) 
     var(--d, 201%) 100% /200% 3px 
     no-repeat;
}
.continuous-5:hover {
  --d: -101%;
  transition: 0.5s
}

.continuous-6 {
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 10px), currentColor 0 calc(25% + 10px), transparent 0 50%) 
    bottom right /200% 3px 
    no-repeat;
}
.continuous-6:hover {
  background-position: bottom left;
  transition: 0.3s
}

.continuous-7 {
  background: 
     linear-gradient(90deg, currentColor calc(100%/3), transparent 0 calc(200%/3), currentColor 0) 
    var(--d, 0%) 100% /300% 3px 
    no-repeat;
}
.continuous-7:hover {
  --d: 100%;
  transition: 0.5s
}

.continuous-8 {
  background: 
     linear-gradient(90deg, transparent calc(100%/4), currentColor 0 calc(300%/4), transparent 0) 
     var(--d,100%) 100% /200% 3px 
     repeat-x;
}
.continuous-8:hover {
  --d: -100%;
  transition: 0.5s
}


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

The Double:

<div class="double-1">1. Hover me </div>
<div class="double-2">2. Hover me </div>
<div class="double-3">3. Hover me </div>
<div class="double-4">4. Hover me </div>
<div class="double-5">5. Hover me </div>
<div class="double-6">6. Hover me </div>
<div class="double-7">7. Hover me </div>
<div class="double-8">8. Hover me </div>
.double-1 {
  background:
    linear-gradient(currentColor 0 0) bottom 0   left 50% /var(--a, 0) 3px no-repeat,
    linear-gradient(currentColor 0 0) bottom 6px left 50% /var(--b, 0) 3px no-repeat;
  transition:0.5s;

}
.double-1:hover {
  --a: 60%;
  --b: 100%;
}

.double-2 {
  background:
    linear-gradient(currentColor 0 0) bottom 0   left  0 /var(--d, 0) 3px no-repeat,
    linear-gradient(currentColor 0 0) bottom 6px right 0 /var(--d, 0) 3px no-repeat;
  transition:0.5s;

}

.double-2:hover {
  --d: 100%;
}

.double-3 {
  background:
    linear-gradient(currentColor 0 0) bottom 0   left  0 /var(--d, 0) 3px no-repeat,
    linear-gradient(currentColor 0 0) bottom 6px right 0 /var(--d, 0) 3px no-repeat;
  transition: 0.5s, background-position 0s 0.5s;
}

.double-3:hover {
  --d: 100%;
  background-position: bottom 0 right 0, bottom 6px left 0;
}

.double-4 {
  background:
    linear-gradient(currentColor 0 0) 0 100% /var(--d, 0) 3px no-repeat,
    linear-gradient(currentColor 0 0) 100% calc(100% - 6px) /var(--d, 0) 3px no-repeat;
  transition: 0s 0.5s, background-size 0.5s;
}

.double-4:hover {
  --d: 100%;
  background-position: 0% calc(100% - 3px), 100% calc(100% - 3px);
  transition: 0.3s, background-position 0.3s 0.3s;
}

.double-5 {
  background:
    linear-gradient(currentColor 0 0) 0    100%/var(--d, 0) 3px no-repeat,
    linear-gradient(currentColor 0 0) 100% 100%/var(--d, 0) 3px no-repeat;
  transition:0.5s;
}

.double-5:hover {
  --d: 51%;
}

.double-6 {
  background:
    linear-gradient(currentColor 0 0) 0 100% /var(--d, 0%) 3px no-repeat,
    linear-gradient(90deg, transparent 50%, currentColor 0) bottom /calc(2*var(--d, 0%)) 3px no-repeat;
  transition:0.5s;
}

.double-6:hover {
  --d: 51%;
}

.double-7 {
  background:
    linear-gradient(currentColor 0 0) 100% 100% /var(--d, 0%) 3px no-repeat,
    linear-gradient(-90deg, transparent 50%, currentColor 0) bottom /calc(2*var(--d, 0%)) 3px no-repeat;
  transition:0.5s;
}

.double-7:hover {
  --d: 51%;
}

.double-8 {
  background:
    linear-gradient( 90deg, transparent 50%, currentColor 0) 75% 100% /var(--d, 0%) 3px no-repeat,
    linear-gradient(-90deg, transparent 50%, currentColor 0) 25% 100% /var(--d, 0%) 3px no-repeat;
  transition:0.5s;
}

.double-8:hover {
  --d: 100%;
}


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

The Two Steps:

<div class="two-steps-1">1. Hover me </div>
<div class="two-steps-2">2. Hover me </div>
<div class="two-steps-3">3. Hover me </div>
<div class="two-steps-4">4. Hover me </div>
<div class="two-steps-5">5. Hover me </div>
<div class="two-steps-6">6. Hover me </div>
<div class="two-steps-7">7. Hover me </div>
.two-steps-1 {
  background:
    linear-gradient(currentColor 0 0) var(--p, -100%) 100% /50% 3px no-repeat,
    linear-gradient(currentColor 0 0) 0 100% /var(--d, 0) 3px no-repeat;
  transition: 0.3s, background-position 0.3s 0.2s;
}
.two-steps-1:hover {
  --d: 100%;
  --p: 0%;
  transition: 0.3s, background-size 0.3s 0.2s
}

.two-steps-2 {
  background:
    linear-gradient(currentColor 0 0) var(--p, 200%) 100% /50% 3px no-repeat,
    linear-gradient(currentColor 0 0) 100% 100% /var(--d, 0) 3px no-repeat;
  transition: 0.3s, background-position 0.3s 0.2s;
}
.two-steps-2:hover {
  --d: 100%;
  --p: 100%;
  transition: 0.3s, background-size 0.3s 0.2s
}

.two-steps-3 {
  background:
    linear-gradient(currentColor 0 0) var(--p, 201%) 100% /50% 3px no-repeat,
    linear-gradient(90deg, currentColor 50%, transparent 0) bottom /var(--d, 0) 3px no-repeat;
  transition: 0.3s, background-size 0.3s 0.2s;
}
.two-steps-3:hover {
  --d: 100%;
  --p: 100%;
  transition: 0.3s, background-position 0.3s 0.2s
}

.two-steps-4 {
  background:
    linear-gradient(currentColor 0 0) var(--p, -100%) 100% /50% 3px no-repeat,
    linear-gradient(-90deg, currentColor 50%, transparent 0) bottom /var(--d, 0) 3px no-repeat;
  transition: 0.3s, background-size 0.3s 0.2s;
}
.two-steps-4:hover {
  --d: 100%;
  --p: 0%;
  transition: 0.3s, background-position 0.3s 0.2s
}

.two-steps-5 {
  background:
    linear-gradient(currentColor 0 0) var(--p, 201%) 100% /50% 3px no-repeat,
    linear-gradient(-90deg, currentColor 50%, transparent 0) bottom /var(--d, 0) 3px no-repeat;
  transition: 0.3s, background-size 0.3s 0.2s;
}
.two-steps-5:hover {
  --d: 100%;
  --p: 0%;
  transition: 0.3s, background-position 0.3s 0.2s
}

.two-steps-6 {
  background:
    linear-gradient(currentColor 0 0) var(--p, -101%) 100% /50% 3px no-repeat,
    linear-gradient(90deg, currentColor 50%, transparent 0) bottom /var(--d, 0) 3px no-repeat;
  transition: 0.3s, background-size 0.3s 0.3s;
}
.two-steps-6:hover {
  --d: 100%;
  --p: 100%;
  transition: 0.3s, background-position 0.3s 0.3s
}

.two-steps-7 {
  background:
    linear-gradient(currentColor 0 0) 100% 100% /var(--p, 0%) 3px no-repeat,
    linear-gradient(currentColor 0 0) var(--d, -101%) 100% /50% 3px no-repeat;
  transition: 0.3s, background-size 0.3s 0.2s;
}
.two-steps-7:hover {
  --d: 0%;
  --p: 50%;
  transition: 0.3s, background-position 0.3s 0.2s
}

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

The Unexpected:

<div class="unexpected-1">1. Hover me </div>
<div class="unexpected-2">2. Hover me </div>
<div class="unexpected-3">3. Hover me </div>
<div class="unexpected-4">4. Hover me </div>
<div class="unexpected-5">5. Hover me </div>
<div class="unexpected-6">6. Hover me </div>
<div class="unexpected-7">7. Hover me </div>
<div class="unexpected-8">8. Hover me </div>
.unexpected-1 {
  background: 
      linear-gradient(currentColor 0 0) var(--p, 50%) 
    100% /var(--d, 10%) 3px no-repeat;
  transition: 0.3s, background-position 0.3s 0.3s;
}

.unexpected-1:hover {
  --d: 100%;
  --p: 0%;
  transition: 0.3s, background-size 0.3s 0.3s;
}

.unexpected-3 {
  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-3:hover {
  --d: 100%;
  --p: 100%;
  transition: 0.3s, background-size 0.3s 0.3s;
}

.unexpected-2 {
  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 {
  background: 
      linear-gradient(currentColor 0 0) 
      var(--p, 50%) 100% /var(--d, 10%) 3px no-repeat;
  transition: 0.3s, background-position 0s;
}

.unexpected-4:hover {
  --d: 100%;
  --p: 0%;
  transition: 0.3s, background-size 0.3s 0.3s;
}

.unexpected-5 {
  background:
    linear-gradient(currentColor 0 0) calc(50% + 10px) 100% /20px 3px no-repeat,
    linear-gradient(90deg, transparent calc(100% - 20px), currentColor 0) 0 100%/var(--d, 50%) 3px no-repeat;
  transition: 0.3s;
}

.unexpected-5:hover {
  --d: 0%;
  background-position: calc(50% + 0px) 100%, 0 100%;
  transition: 0.3s cubic-bezier(0, -5, 1, -5), background-size 0.3s 0.3s;
}

.unexpected-6 {
  background: 
    linear-gradient(currentColor 0 0) left  var(--p, 50%) bottom 0 /var(--d, 20px) 3px no-repeat,
    linear-gradient(currentColor 0 0) right var(--p, 50%) bottom 0 /var(--d, 20px) 3px no-repeat;
  transition: 0.3s, background-position 0s;
}

.unexpected-6:hover {
  --d: 100%;
  --p: 100%;
  transition: 0.3s, background-size 0.3s 0.3s;
}

.unexpected-7 {
  background: linear-gradient(currentColor 0 0) -20% 100%/var(--p, 10%) 3px no-repeat;
  transition: 0.5s 0.3s cubic-bezier(0, 1.25, 1, 1.8), background-size 0.3s;
}

.unexpected-7:hover {
  background-position: 50% 100%;
  --p: 50%;
  transition: 0.5s cubic-bezier(0, 1.25, 1, 1.8), background-size 0.2s 0.7s;
}

.unexpected-8 {
  background: linear-gradient(currentColor 0 0) bottom/var(--p, 10%) 3px no-repeat;
  transition: 0s;
}

.unexpected-8:hover {
  --p: 10.1%;
  transition: 0.5s cubic-bezier(0, 800, 1, 800);
}


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

The Rounded:

<div class="rounded-1">1. Hover me </div>
<div class="rounded-2">2. Hover me </div>
<div class="rounded-3">3. Hover me </div>
<div class="rounded-4">4. Hover me </div>
<div class="rounded-5">5. Hover me </div>
<div class="rounded-6">6. Hover me </div>
<div class="rounded-7">7. Hover me </div>
<div class="rounded-8">8. Hover me </div>
.rounded-1 {
  background: 
     radial-gradient(circle closest-side, currentColor 90%, transparent) 
    bottom /var(--d, 80%) 12px repeat-x;
  transition: 0.5s;
}
.rounded-1:hover {
  --d: 12px;
}

.rounded-2 {
  background: 
     radial-gradient(circle closest-side, currentColor 90%, transparent) 
     bottom /var(--d, 3px) 12px repeat-x;
  transition: 0.5s;
}
.rounded-2:hover {
  --d: 12px;
}

.rounded-3 {
  background: 
      radial-gradient(circle 7px, currentColor 90%, transparent) bottom var(--d, -14px) 
      left 50%/12px 14px repeat-x;
  transition: 0.5s;
}
.rounded-3:hover {
  --d: -7px;
}

.rounded-4 {
  background:
    radial-gradient(circle closest-side, currentColor 80%, transparent) bottom var(--p1, 0px) left 50% /100% var(--p, 12px) no-repeat,
    linear-gradient(currentColor 0 0) bottom 4px left 50%/var(--d, 0%) 3px no-repeat;
  transition: 0.5s;
}
.rounded-4:hover {
  --d: 100%;
  --p: 3px;
  --p1: 4px;
}

.rounded-5 {
  padding-bottom: 8px;
  background:
    radial-gradient(circle closest-side, currentColor 80%, transparent) bottom 0 left calc(50% - var(--d, 0px)/2) /100% 12px no-repeat,
    radial-gradient(circle closest-side, currentColor 80%, transparent) bottom 0 left calc(50% + var(--d, 0px)/2) /100% 12px no-repeat,
    linear-gradient(currentColor 0 0) bottom /var(--d, 0%) 12px no-repeat;
  transition: 0.5s;
}
.rounded-5:hover {
  --d: 50px;
}

.rounded-6 {
  padding-bottom: 8px;
  background:
    radial-gradient(circle closest-side, currentColor 80%, transparent) bottom /12px 12px no-repeat,
    radial-gradient(circle closest-side, currentColor 80%, transparent) bottom /12px 12px no-repeat,
    linear-gradient(currentColor 0 0) bottom left /var(--d, 0%) 12px no-repeat,
    linear-gradient(currentColor 0 0) bottom right/var(--d, 0%) 12px no-repeat;
  transition: 0.3s, background-position 0.3s 0.3s;
}
.rounded-6:hover {
  --d: 100%;
  background-position: bottom left, bottom right;
  transition: 0.3s, background-size 0.3s 0.3s;
}

.rounded-7 {
  padding-bottom: 8px;
  background:
    radial-gradient(circle closest-side, currentColor 80%, transparent) -12px 100% /12px 12px no-repeat,
    linear-gradient(currentColor 0 0) bottom left /var(--d, 0) 12px no-repeat;
  transition: 0.3s linear;
}
.rounded-7:hover {
  --d: 50%;
  background-position: 50% 100%, bottom left;
}

.rounded-8 {
  background:
    radial-gradient(circle closest-side, currentColor 80%, transparent) var(--d, 50%) 100% /12px 12px no-repeat;
}

.rounded-8:hover {
  --d: 50.1%;
  transition: 0.3s cubic-bezier(.5, -900, .5, 900);
}

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

The Fading:

<div class="fading-1">1. Hover me </div>
<div class="fading-2">2. Hover me </div>
<div class="fading-3">3. Hover me </div>
<div class="fading-4">4. Hover me </div>
<div class="fading-5">5. Hover me </div>
<div class="fading-6">6. Hover me </div>
<div class="fading-7">7. Hover me </div>
.fading-1 {
  background: 
     linear-gradient(90deg, transparent, black, transparent) 
    bottom /var(--d, 0) 3px no-repeat;
  transition: 0.5s;
}
.fading-1:hover {
  --d: 100%;
}

.fading-2 {
  background: 
     linear-gradient(transparent, black) 
     bottom /100% var(--d, 0) no-repeat;
  transition: 0.5s;
}
.fading-2:hover {
  --d: 12px;
}

.fading-3 {
  background: 
      linear-gradient(-45deg, transparent calc(100%/3), rgba(0, 0, 0, 0.5), transparent calc(200%/3)) 
      bottom right/350% 100% no-repeat;
  transition: 0.5s linear;
}
.fading-3:hover {
  background-position: bottom left;
}

.fading-4 {
  background: 
     radial-gradient(transparent 50%, rgba(0, 0, 0, 0.5)) 
     center/200% 200% no-repeat;
  transition: 0.5s ;
}
.fading-4:hover {
  background-size: 100% 100%;
}

.fading-5 {
  background: 
     linear-gradient(-45deg, transparent calc(100%/3), rgba(0, 0, 0, 0.5), transparent calc(200%/3)) 
     bottom right/350% 100% no-repeat;
  transition: 0.5s linear, background-size 0s 0.5s;
}
.fading-5:hover {
  background-position: bottom left;
  background-size: 0 0;
}

.fading-6 {
  background: 
     linear-gradient(90deg, rgba(0, 0, 0, 0.5), transparent 30% 70%, rgba(0, 0, 0, 0.5)) 
     center/300% 100% no-repeat;
  transition: 0.5s;
}
.fading-6:hover {
  background-size: 100% 100%;
}

.fading-7 {
  background:
    radial-gradient(farthest-side at bottom, black, transparent) 
    bottom/calc(2*var(--d, 0%)) var(--d, 0) no-repeat;
  transition: 0.5s;
}
.fading-7:hover {
  --d: 50%;
}

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

The Infinite:

Keep the hover for too long here.

<div class="infinite-1">1. Hover me </div>
<div class="infinite-2">2. Hover me </div>
<div class="infinite-3">3. Hover me </div>
<div class="infinite-4">4. Hover me </div>
<div class="infinite-5">5. Hover me </div>
<div class="infinite-6">6. Hover me </div>
<div class="infinite-7">7. Hover me </div>
<div class="infinite-8">8. Hover me </div>
.infinite-1 {
  background: 
     repeating-linear-gradient(90deg, currentColor 0 15px, transparent 0 30px) 
     bottom left /2000% 3px no-repeat;
  transition: 99999s linear;
}
.infinite-1:hover {
  background-position: bottom right;
  transition: 40s linear;
}

.infinite-2 {
  background: 
     repeating-linear-gradient(90deg, currentColor 0 15px, transparent 0 30px) 
     bottom right /2000% 3px no-repeat;
  transition: 99999s linear;
}
.infinite-2:hover {
  background-position: bottom left;
  transition: 40s linear;
}

.infinite-3 {
  background:
    repeating-linear-gradient(90deg, currentColor 0 15px, transparent 0 30px),
    repeating-linear-gradient(90deg, currentColor 0 15px, transparent 0 30px);
  background-position: center bottom;
  background-size: 2000% 3px;
  background-repeat: no-repeat;
  transition: 99999s linear;
}
.infinite-3:hover {
  background-position: bottom left, bottom right;
  transition: 40s linear;
}

.infinite-4 {
  background: 
     linear-gradient(90deg, currentColor 50%, transparent 0) 
     0 100%/200% 3px repeat-x;
  transition: 99999s linear;
}
.infinite-4:hover {
  background-position: -8000px 100%;
  transition: 30s;
}

.infinite-5 {
  background: 
     linear-gradient(90deg, currentColor 50%, transparent 0) 
     0 100%/200% 3px repeat-x;
  transition: 99999s linear;
}
.infinite-5:hover {
  background-position: 8000px 100%;
  transition: 30s;
}

.infinite-6 {
  background:
    linear-gradient(90deg, currentColor 30px, transparent 0 calc(100% - 30px), currentColor 0),
    linear-gradient(90deg, currentColor 30px, transparent 0 calc(100% - 30px), currentColor 0);
  background-size: 200% 3px;
  background-position: 0 100%, 0px 100%;
  background-repeat: repeat-x;
  transition: 99999s linear;
}
.infinite-6:hover {
  background-position: 10000px 100%, -10000px 100%;
  transition: 30s linear;
}

.infinite-7 {
  background:
    linear-gradient(90deg, currentColor 15px, transparent 0 calc(100% - 15px), currentColor 0),
    linear-gradient(90deg, currentColor 15px, transparent 0 calc(100% - 15px), currentColor 0);
  background-size: 100% 3px;
  background-position: 0 100%, 0px 100%;
  background-repeat: repeat-x;
  transition: 99999s linear;
}
.infinite-7:hover {
  background-position: 10000px 100%, -10000px 100%;
  transition: 30s linear;
}

.infinite-8 {
  background:
    linear-gradient(90deg, transparent calc(25% - 15px), currentColor 0 calc(25% + 15px), transparent 0) 0 100%/200% 3px repeat-x;
  transition: 99999s linear;
}
.infinite-8:hover {
  background-position: 10000px 100%, -10000px 100%;
  transition: 30s linear;
}

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

See the Pen The infinite by Temani Afif (@t_afif) on CodePen.

The All Sides:

<div class="allsides-1">1. Hover me </div>
<div class="allsides-2">2. Hover me </div>
<div class="allsides-3">3. Hover me </div>
<div class="allsides-4">4. Hover me </div>
<div class="allsides-5">5. Hover me </div>
<div class="allsides-6">6. Hover me </div>
<div class="allsides-7">7. Hover me </div>
<div class="allsides-8">8. Hover me </div>
.allsides-1 {
  background:
    linear-gradient(currentColor 0 0) 100% 0,
    linear-gradient(currentColor 0 0) 0 0,
    linear-gradient(currentColor 0 0) 0 100%,
    linear-gradient(currentColor 0 0) 100% 100%;
  background-size: var(--d, 0) 3px, 3px var(--d, 0);
  background-repeat: no-repeat;
  transition: 0.5s;
}
.allsides-1:hover {
  --d: 100%;
}

.allsides-2 {
  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: var(--d, 0) 3px, 3px var(--d, 0);
  background-repeat: no-repeat;
  transition: 0.5s;
}
.allsides-2:hover {
  --d: 100%;
}

.allsides-3 {
  background:
    linear-gradient(currentColor 0 0) top,
    linear-gradient(currentColor 0 0) left,
    linear-gradient(currentColor 0 0) bottom,
    linear-gradient(currentColor 0 0) right;
  background-size: var(--d, 0) 3px, 3px var(--d, 0);
  background-repeat: no-repeat;
  transition: 0.5s;
}
.allsides-3:hover {
  --d: 100%;
}

.allsides-4 {
  background:
    linear-gradient(currentColor 0 0) var(--p, 100%) 0,
    linear-gradient(currentColor 0 0) 0 var(--d, 0),
    linear-gradient(currentColor 0 0) var(--d, 0) 100%,
    linear-gradient(currentColor 0 0) 100% var(--p, 100%);
  background-size: var(--d, 0) 3px, 3px var(--d, 0);
  background-repeat: no-repeat;
  transition: 0.5s, background-position 0s 0.5s;
}
.allsides-4:hover {
  --d: 100%;
  --p: 0%
}

.allsides-5 {
  background:
    linear-gradient(currentColor 0 0) var(--d, 0) 0,
    linear-gradient(currentColor 0 0) 0 var(--d, 0),
    linear-gradient(currentColor 0 0) var(--p, 100%) 100%,
    linear-gradient(currentColor 0 0) 100% var(--p, 100%);
  background-size: var(--d, 0) 3px, 3px var(--d, 0);
  background-repeat: no-repeat;
  transition: 0.5s, background-position 0s 0.5s;
}
.allsides-5:hover {
  --d: 100%;
  --p: 0%
}

.allsides-6 {
  background:
    linear-gradient(currentColor 0 0) 0 0,
    linear-gradient(currentColor 0 0) 0 0,
    linear-gradient(currentColor 0 0) 0 100%,
    linear-gradient(currentColor 0 0) 0 100%,
    linear-gradient(currentColor 0 0) 100% 0,
    linear-gradient(currentColor 0 0) 100% 0,
    linear-gradient(currentColor 0 0) 100% 100%,
    linear-gradient(currentColor 0 0) 100% 100%;
  background-size: var(--d, 0) 3px, 3px var(--d, 0);
  background-repeat: no-repeat;
  transition: 0.5s;
}
.allsides-6:hover {
  --d: 20px;
}

.allsides-7 {
  background:
    linear-gradient(currentColor 0 0) 0 100%,
    linear-gradient(currentColor 0 0) 0 100%,
    linear-gradient(currentColor 0 0) 100% 100%,
    linear-gradient(currentColor 0 0) 100% 100%;
  background-size: var(--p, 50%) 3px, 3px var(--d, 0);
  background-repeat: no-repeat;
  transition: 0.5s;
}
.allsides-7:hover {
  --d: 100%;
  --p: 0%
}

.allsides-8 {
  background:
    linear-gradient(currentColor 0 0) 0 100%,
    linear-gradient(currentColor 0 0) 0 100%,
    linear-gradient(currentColor 0 0) 100% 0,
    linear-gradient(currentColor 0 0) 100% 0;
  background-size: 20px 3px, 3px 20px;
  background-repeat: no-repeat;
  transition: 0.5s;
}
.allsides-8:hover {
  background-position: 100% 100%, 0 0, 0 0, 100% 100%;
}

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

See the Pen The All Sides by Temani Afif (@t_afif) on CodePen.

The Thick:

<div class="thick-1">1. Hover me </div>
<div class="thick-2">2. Hover me </div>
<div class="thick-3">3. Hover me </div>
<div class="thick-4">4. Hover me </div>
<div class="thick-5">5. Hover me </div>
<div class="thick-6">6. Hover me </div>
<div class="thick-7">7. Hover me </div>
<div class="thick-8">8. Hover me </div>
.thick-1 {
  background: 
     linear-gradient(currentColor 0 0) 
     bottom /100% var(--d, 0px) no-repeat;
  transition: 0.5s;
}

.thick-1:hover {
  --d: 10px;
}

.thick-2 {
  background: 
     linear-gradient(#000 0 0) 
     50% calc(-3px - 100%) /var(--d, 0%) 200% no-repeat;
  transition: 0.3s, background-size 0.3s 0.3s;
}
.thick-2:hover {
  --d: 100%;
  background-position: 50% 0%;
  color: #fff;
  transition: 0.3s, background-position 0.3s 0.3s, color 0.3s 0.3s;
}

.thick-3 {
  background: 
     linear-gradient(#000 0 0) 
    0% calc(-3px - 100%) /var(--d, 0%) 200% no-repeat;
  transition: 0.3s, background-size 0.3s 0.3s;
}
.thick-3:hover {
  --d: 100%;
  background-position: 50% 0%;
  color: #fff;
  transition: 0.3s, background-position 0.3s 0.3s, color 0.3s 0.3s;
}

.thick-4 {
  background:
    linear-gradient(#000 0 0) left  /var(--d, 0%) 100% no-repeat,
    linear-gradient(#000 0 0) right /var(--d, 0%) 100% no-repeat;
  transition: 0.5s;
}
.thick-4:hover {
  --d: 100%;
  color: #fff;
}

.thick-5 {
  background:
    linear-gradient(#000 0 0) top    /100% var(--d, 0%) no-repeat,
    linear-gradient(#000 0 0) bottom /100% var(--d, 0%) no-repeat;
  transition: 0.5s;
}
.thick-5:hover {
  --d: 100%;
  color: #fff;
}

.thick-6 {
  background:
    linear-gradient(#000 0 0) 
    left /100% var(--d, 0%) no-repeat;
  transition: 0.5s;
}
.thick-6:hover {
  --d: 100%;
  color: #fff;
}

.thick-7 {
  background:
    linear-gradient(#000 0 0) 
    left /var(--d, 0%) 100% no-repeat;
  transition: 0.5s;
}
.thick-7:hover {
  --d: 100%;
  color: #fff;
}

.thick-8 {
  background:
    linear-gradient(#000 0 0) 
    top /100% var(--d, 0%) no-repeat;
  transition: 0.5s;
}
.thick-8:hover {
  --d: 100%;
  color: #fff;
}

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

body {
  text-align:center;
}

See the Pen The thick by Temani Afif (@t_afif) on CodePen.

The Sliding:

The below requires us to know the width of the element so it’s more suitable for monospace fonts.

<div class="sliding-1">1. Hover me </div>
<div class="sliding-2">2. Hover me </div>
<div class="sliding-3">3. Hover me </div>
<div class="sliding-4">4. Hover me </div>
<div class="sliding-5">5. Hover me </div>
<div class="sliding-6">6. Hover me </div>
<div class="sliding-7">7. Hover me </div>
<div class="sliding-8">8. Hover me </div>
.sliding-1 {
  text-shadow: var(--t, 0ch) 0 #fff;
  text-indent: calc(-2*var(--t, 0ch));
  background: linear-gradient(currentColor 0 0) right/var(--d, 0) 100% no-repeat;
  transition: 0.5s linear;
}
.sliding-1:hover {
  --d: 100%;
  --t: 11ch;
}



.sliding-2 {
  white-space: nowrap;
  overflow: hidden;
  text-shadow: calc(-1*var(--t, 0ch)) 0 #fff;
  text-indent: var(--t, 0ch);
  background: linear-gradient(currentColor 0 0) left/var(--d, 0) 100% no-repeat;
  transition: 0.5s linear;
}
.sliding-2:hover {
  --d: 100%;
  --t: 11ch;
}


.sliding-3 {
  height: 1.2em;
  white-space: nowrap;
  overflow: hidden;
  text-shadow: 0 -1.2em #fff;
  line-height: var(--t, 1.2em);
  background: linear-gradient(currentColor 0 0) top/100% var(--d, 0) no-repeat;
  transition: 0.5s linear;
}
.sliding-3:hover {
  --d: 100%;
  --t: 3.6em;
}
.sliding-4 {
  height: 1.2em;
  white-space: nowrap;
  overflow: hidden;
  text-shadow: 0 calc(-0.5*var(--t, 0em)) #fff;
  line-height: calc(1.2em + var(--t, 0em));
  background: linear-gradient(currentColor 0 0) top/100% var(--d, 0) no-repeat;
  transition: 0.5s linear;
}
.sliding-4:hover {
  --d: 100%;
  --t: 2.4em;
}

.sliding-5 {
  height: 1.2em;
  color: #fff;
  text-shadow: 0 -1.2em black;
  line-height: var(--t, 3.6em);
  background: linear-gradient(black 0 0) bottom/100% var(--d, 0%) no-repeat;
  transition: 0.5s linear;
}
.sliding-5:hover {
  --d: 100%;
  --t: 1.2em;
}


.sliding-6 {
  height: 1.2em;
  color: #fff;
  text-shadow: 0 calc(-0.5*var(--t, 2.4em)) black;
  line-height: calc(1.2em + var(--t, 2.4em));
  background: linear-gradient(black 0 0) bottom/100% var(--d, 0) no-repeat;
  transition: 0.5s linear;
}
.sliding-6:hover {
  --d: 100%;
  --t: 0em;
}
.sliding-7 {
  text-shadow: 11ch 0 #fff;
  text-indent: calc(-2*var(--t, 0px));
  background: linear-gradient(currentColor 0 0) right/var(--d, 0) 100% no-repeat;
  transition: 0.5s linear;
}

.sliding-7:hover {
  --d: 100%;
  --t: 11ch;
}
.sliding-8 {
  text-shadow: -11ch 0 #fff;
  text-indent: var(--t, 0);
  background: linear-gradient(currentColor 0 0) left/var(--d, 0) 100% no-repeat;
  transition: 0.5s linear;
}

.sliding-8:hover {
  --d: 100%;
  --t: 11ch;
}

/**/
div[class] {
  display:inline-block;
  font-size:40px;
  font-family:monospace;
  white-space: nowrap;
  overflow: hidden;
  margin:25px;
  width:11ch;
  cursor:pointer;
}

body {
  text-align:center;
}

The Fancy:

<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>
<div class="fancy-8">8. Hover me </div>
.fancy-1 {
  background:
    radial-gradient(farthest-side at bottom, black 98%, transparent) bottom/calc(2*var(--d, 7px)) var(--d, 0) no-repeat,
    linear-gradient(black 0 0) bottom /15px 3px no-repeat;
  transition: 0.5s;
}
.fancy-1:hover {
  --d: 150%;
  color: #fff
}

.fancy-2 {
  background:
    radial-gradient(circle at bottom right, black 50%, transparent) bottom right/var(--d, 0) var(--d, 0) no-repeat,
    radial-gradient(circle at bottom left, black 50%, transparent) bottom left /var(--d, 0) var(--d, 0) no-repeat,
    linear-gradient(black 0 0) bottom /15px 3px no-repeat,
    linear-gradient(black 0 0) bottom /15px 3px no-repeat;
  transition: 0.3s, background-position 0.3s 0.3s
}
.fancy-2:hover {
  transition: 0.3s, background-size 0.5s 0.3s, color 0.3s 0.3s;
  background-position: bottom right, bottom left;
  --d: 150px;
  color: #fff
}

.fancy-3 {
  background:
    radial-gradient(circle, black 50%, transparent) center/var(--d, 0) var(--d, 0) no-repeat,
    linear-gradient(black 0 0) bottom -12px left 50% /15px 15px no-repeat;
  transition: 0.3s, background-position 0.3s 0.3s
}
.fancy-3:hover {
  transition: 0.3s, background-size 0.4s 0.3s, color 0.3s 0.3s;
  background-position: center;
  --d: 180%;
  color: #fff
}

.fancy-4 {
  background:
    repeating-linear-gradient(black 0 8px, transparent 0 16px) left /var(--d, 0) 100% no-repeat,
    repeating-linear-gradient(transparent 0 8px, black 0 16px) right/var(--d, 0) 100% no-repeat;
  transition: 0.5s;
}
.fancy-4:hover {
  --d: 100%;
  color: #fff
}

.fancy-5 {
  background:
    radial-gradient(farthest-side, transparent calc(100% - 150px), black 0) 
    center /var(--d, 600px) var(--d, 600px) no-repeat;
  transition: 0.5s;
}
.fancy-5:hover {
  --d: 300px;
  color: #fff
}

.fancy-6 {
  background:
    linear-gradient(45deg, #000 50%, transparent 0) right /250% 100% no-repeat,
    linear-gradient(45deg, transparent 50%, #000 0) left /250% 100% no-repeat;
  transition: 0.5s;
}
.fancy-6:hover {
  background-position: center;
  color: #fff;
}

.fancy-7 {
  background:
    conic-gradient(from -45deg, black 90deg, transparent 91deg) bottom /20px 250% repeat-x,
    conic-gradient(from -45deg, transparent 90deg, black 91deg) top /20px 250% repeat-x;
  transition: 0.5s;
}
.fancy-7:hover {
  background-position: center;
  color: #fff
}

.fancy-8 {
  background:
    conic-gradient(from 135deg at 50% -10px, black 90deg, transparent 91deg) 50% calc(-3px - 50%) /100% 300% no-repeat;
  transition: 0.5s;
}
.fancy-8:hover {
  background-position: bottom;
  color: #fff
}


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

body {
  text-align:center;
}

See the Pen The fancy by Temani Afif (@t_afif) on CodePen.

The Inverted:

The below effect doesn’t work on Firefox due to this bug.

<div class="inverted-1">1. Hover me </div>
<div class="inverted-2">2. Hover me </div>
<div class="inverted-3">3. Hover me </div>
<div class="inverted-4">4. Hover me </div>
<div class="inverted-5">5. Hover me </div>
<div class="inverted-6">6. Hover me </div>
<div class="inverted-7">7. Hover me </div>
<div class="inverted-8">8. Hover me </div>
.inverted-1 {
  background:
    linear-gradient(black 50%, #fff 0) 0 var(--d, 0) /100% 200% no-repeat,
    linear-gradient(transparent 50%, black 0) 0 var(--d, 0) /100% 200% no-repeat;
  -webkit-background-clip: text, padding-box;
  background-clip: text, padding-box;
  transition: 0.8s
}
.inverted-1:hover {
  --d: 50%;
}

.inverted-2 {
  background:
    linear-gradient(90deg, black 50%, #fff 0),
    linear-gradient(-90deg, black 50%, #fff 0),
    linear-gradient(90deg, transparent 50%, black 0),
    linear-gradient(-90deg, transparent 50%, black 0);
  background-repeat: no-repeat;
  background-size: 200% 51%;
  background-position: top left, bottom right;
  -webkit-background-clip: text, text, padding-box, padding-box;
  background-clip: text, text, padding-box, padding-box;
  transition: 0.8s
}

.inverted-2:hover {
  background-position: top right, bottom left;
}
.inverted-3 {
  background:
    linear-gradient(-135deg, black 50%, #fff 0) var(--d, 100%) 0/250% 100% no-repeat,
    linear-gradient(-135deg, transparent 50%, black 0) var(--d, 100%) 0/250% 100% no-repeat;
  -webkit-background-clip: text, padding-box;
  background-clip: text, padding-box;
  transition: 0.8s
}

.inverted-3:hover {
  --d: 50%;
}

.inverted-4 {
  background:
    linear-gradient(to bottom right, black 50%, #fff 50.1%) left/300% 300% no-repeat,
    linear-gradient(to bottom right, transparent 50%, black 50.1%) left/300% 300% no-repeat;
  -webkit-background-clip: text, padding-box;
  background-clip: text, padding-box;
  transition: 0.8s
}
.inverted-4:hover {
  background-position: center;
}

.inverted-5 {
  background:
    linear-gradient(black 0 0) right/100% 100% no-repeat,
    linear-gradient(black, 40%, #fff 0 60%, black 0) left/0% 100% no-repeat,
    linear-gradient(transparent 40%, black 0 60%, transparent 0) left/0% 100% no-repeat;
  -webkit-background-clip: text, text, padding-box;
  background-clip: text, text, padding-box;
  transition: 0.8s
}
.inverted-5:hover {
  background-size: 0% 100%, 100% 100%, 100% 100%;
}

.inverted-6 {
  background:
    linear-gradient(white 80%, black 0) calc(0*100%/3) var(--d, 100%),
    linear-gradient(black 80%, transparent 0) calc(0*100%/3) var(--d, 100%),
    linear-gradient(white 60%, black 0) calc(1*100%/3) var(--d, 100%),
    linear-gradient(black 60%, transparent 0) calc(1*100%/3) var(--d, 100%),
    linear-gradient(white 40%, black 0) calc(2*100%/3) var(--d, 100%),
    linear-gradient(black 40%, transparent 0) calc(2*100%/3) var(--d, 100%),
    linear-gradient(white 20%, black 0) calc(3*100%/3) var(--d, 100%),
    linear-gradient(black 20%, transparent 0) calc(3*100%/3) var(--d, 100%);
  -webkit-background-clip: text, padding-box;
  background-clip: text, padding-box;
  background-size: calc(100%/4) 500%;
  background-repeat: no-repeat;
  transition: 0.8s
}
.inverted-6:hover {
  --d: 0%;
}

.inverted-7 {
  background:
    linear-gradient(-45deg, black 40%, #fff 0 60%, black 0) right/300% 100% no-repeat,
    linear-gradient(-45deg, transparent 40%, black 0 60%, transparent 0) right/300% 100% no-repeat;
  -webkit-background-clip: text, padding-box;
  background-clip: text, padding-box;
  transition: 0.8s
}
.inverted-7:hover {
  background-position: left;
}

.inverted-8 {
  background:
    linear-gradient(-45deg, black 40%, #fff 0 60%, black 0) right/300% 100% no-repeat,
    linear-gradient(-45deg, transparent 40%, black 0 60%, transparent 0) right/300% 100% no-repeat;
  -webkit-background-clip: text, padding-box;
  background-clip: text, padding-box;
}
.inverted-8:hover {
  background-position: left;
  transition: 0.8s
}


/**/
div[class] {
  color: transparent;
  font-weight: bold;
  display:inline-block;
  font-size:40px;
  font-family:sans-serif;
  margin:25px;
  padding:8px;
  cursor:pointer;
}

body {
  text-align:center;
}

See the Pen The inverted by Temani Afif (@t_afif) on CodePen.

The 3D:

Warning: the below uses some advanced CSS but I considered CSS variables to make it easy to control.

<div class="d-1">1. Hover me </div>
<div class="d-2">2. Hover me </div>
<div class="d-3">3. Hover me </div>
<div class="d-4">4. Hover me </div>
.d-1 {
  --b:4px;   /* border length*/
  --c:20px;  /* the cube perspective */
  
  --g:calc(var(--c)*0.707); /* 0.707 = cos(45deg) = sin(45deg) */
  
  transition: 0.5s;
  border: solid transparent;
  border-width:var(--b) var(--b) calc(var(--c) + var(--b)) calc(var(--c) + var(--b));
  background:
    linear-gradient(-45deg,transparent var(--g),rgba(255,255,255,0.6) 0) left  /var(--c) 100%,
    linear-gradient(135deg,transparent var(--g),rgba(255,255,255,0.3) 0) bottom /100% var(--c),
    conic-gradient(from -90deg at top var(--b)   right var(--b),currentColor 270deg,transparent 0),
    conic-gradient(from  90deg at bottom calc(var(--c) + var(--b)) left calc(var(--c) + var(--b)),currentColor 270deg,transparent 0) ;
  background-repeat:no-repeat;
  background-origin:border-box;
  transform:translate(calc(var(--c)/-1),calc(var(--c)/1));
  clip-path: 
    polygon(var(--c) 0%, var(--c) 0%, 
    100% 0%, 
    100% calc(100% - var(--c)),100% calc(100% - var(--c)),
    var(--c) calc(100% - var(--c)),
    var(--c) calc(100% - var(--c)));
}
.d-1:hover {
  transform:translate(0,0);
  clip-path: 
    polygon(0% var(--c), var(--c) 0%, 
    100% 0%, 
    100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 
    0% 100%,0% 100%);
}
.d-2 {
  --b:4px;   /* border length*/
  --c:20px;  /* the cube perspective */
  
  --g:calc(var(--c)*0.707); /* 0.707 = cos(45deg) = sin(45deg) */
  
  color:blue;
  transition: 0.5s;
  border: solid transparent;
  border-width:var(--b) calc(var(--c) + var(--b)) calc(var(--c) + var(--b)) var(--b);
  background:
    linear-gradient(  45deg,transparent var(--g),rgba(255,255,255,0.6) 0) right  /var(--c) 100%,
    linear-gradient(-135deg,transparent var(--g),rgba(255,255,255,0.3) 0) bottom /100% var(--c),
    conic-gradient(from -180deg at top var(--b) left var(--b),currentColor 270deg,transparent 0),
    conic-gradient(from    0deg at bottom calc(var(--c) + var(--b)) right calc(var(--c) + var(--b)),currentColor 270deg,transparent 0) ;
  background-repeat:no-repeat;
  background-origin:border-box;
  transform:translate(calc(var(--c)/1),calc(var(--c)/1));
  clip-path: 
    polygon(calc(100% - var(--c)) 0%, calc(100% - var(--c)) 0%, 
    0% 0%, 
    0% calc(100% - var(--c)),0% calc(100% - var(--c)),
    calc(100% - var(--c)) calc(100% - var(--c)),
    calc(100% - var(--c)) calc(100% - var(--c)));
}
.d-2:hover {
  transform:translate(0,0);
  clip-path: 
    polygon(100% var(--c), calc(100% - var(--c)) 0%, 
    0% 0%, 
    0% calc(100% - var(--c)), var(--c) 100%, 
    100% 100%,
    100% 100%);
}

.d-3 {
  --c:20px;  /* the cube perspective */
  
  --g:calc(var(--c)*0.707); /* 0.707 = cos(45deg) = sin(45deg) */
  
  border: solid transparent;
  border-width:0 var(--c) var(--c) 0;
  background:
    linear-gradient(  45deg,transparent var(--g),rgba(255,255,255,0.6) 0) right  /var(--c) 100%,
    linear-gradient(-135deg,transparent var(--g),rgba(255,255,255,0.3) 0) bottom /100% var(--c);
  background-repeat:no-repeat;
  background-origin:border-box;
  transition:0.3s,background-color 0.3s 0.3s,color 0.3s 0.3s;
  transform:translate(calc(var(--c)/1),calc(var(--c)/1));
  clip-path: 
    polygon(calc(100% - var(--c)) 0%, calc(100% - var(--c)) 0%, 
    0% 0%, 
    0% calc(100% - var(--c)),0% calc(100% - var(--c)),
    calc(100% - var(--c)) calc(100% - var(--c)),
    calc(100% - var(--c)) calc(100% - var(--c)));
}
.d-3:hover {
  transition:0.3s 0.3s,background-color 0.3s,color 0.3s;
  background-color:black;
  color:#fff;
  transform:translate(0,0);
  clip-path: 
    polygon(100% var(--c), calc(100% - var(--c)) 0%, 
    0% 0%, 
    0% calc(100% - var(--c)), var(--c) 100%, 
    100% 100%,
    100% 100%);
}
.d-4 {
  --c:20px;  /* the cube perspective */
  
  --g:calc(var(--c)*0.707); /* 0.707 = cos(45deg) = sin(45deg) */
  
  
  border: solid transparent;
  border-width:0 0 var(--c) var(--c) ;
  background:
    linear-gradient(-45deg,transparent var(--g),rgba(255,255,255,0.6) 0) left   /var(--c) 100%,
    linear-gradient(135deg,transparent var(--g),rgba(255,255,255,0.3) 0) bottom /100% var(--c);
  background-repeat:no-repeat;
  background-origin:border-box;
  transition:0.3s,background-color 0.3s 0.3s,color 0.3s 0.3s;
  transform:translate(calc(var(--c)/-1),calc(var(--c)/1));
  clip-path: 
    polygon(var(--c) 0%, var(--c) 0%, 
    100% 0%, 
    100% calc(100% - var(--c)),100% calc(100% - var(--c)),
    var(--c) calc(100% - var(--c)),
    var(--c) calc(100% - var(--c)));
}
.d-4:hover {
  transition:0.3s 0.3s,background-color 0.3s,color 0.3s;
  background-color:blue;
  color:#fff;
  transform:translate(0,0);
  clip-path: 
    polygon(0% var(--c), var(--c) 0%, 
    100% 0%, 
    100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 
    0% 100%,0% 100%);
}

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

body {
  text-align:center;
}

See the Pen The 3D by Temani Afif (@t_afif) on CodePen.

Please comment and share this article and if you find anything incorrect please comment us on WhatsApp.

Share Your Love
Avatar photo
Lingaraj Senapati

Hey There! I am Lingaraj Senapati, the Founder of lingarajtechhub.com My skills are Freelance, Web Developer & Designer, Corporate Trainer, Digital Marketer & Youtuber.

Articles: 411

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Related Posts

Trending Now

pointer in c
Pointers In C – With Examples
What is Address In C Programming?
What is Address In C Programming?
common pointer mistakes
Common Mistakes When Working With Pointer
Relationship Between Array And Pointers In C With Examples
Relationship Between Array And Pointers In C With Examples