JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<h3 class="hover">Hover Me</h3>
<h3 class="hover2">Hover Me</h3>

CSS

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-content: center;
}

h3 {
  font-family: system-ui, sans-serif;
  font-size: 3rem;
  margin: auto;
  cursor: pointer;
  padding: .1em .1em;
}


.hover {
  border: 8px solid;
  border-image: repeating-linear-gradient(135deg, #F8CA00 0 10px, #E97F02 0 20px, #BD1550 0 30px) 8;
  -webkit-mask:
    conic-gradient(from 180deg at top 8px right 8px, #0000 90deg, #000 0) var(--_i, 200%) 0 /200% var(--_i, 8px) border-box no-repeat,
    conic-gradient(at bottom 8px left 8px, #0000 90deg, #000 0) 0 var(--_i, 200%)/var(--_i, 8px) 200% border-box no-repeat,
    linear-gradient(#000 0 0) padding-box no-repeat;
  transition: .3s, -webkit-mask-position .3s .3s;
}

.hover:hover {
  --_i: 100%;
  color: #CC333F;
  transition: .3s, -webkit-mask-size .3s .3s;
}

.hover2 {
  --c: black;
  /* the color */
  --b: .1em;
  /* border length*/
  --d: 20px;
  /* the cube depth */

  --_s: calc(var(--d) + var(--b));

  color: var(--c);
  border: solid #0000;
  border-width: var(--b) var(--b) var(--_s) var(--_s);
  background:
    conic-gradient(at left var(--d) bottom var(--d),
      #0000 90deg, rgb(255 255 255 /0.3) 0 225deg, rgb(255 255 255 /0.6) 0) border-box,
    conic-gradient(at left var(--_s) bottom var(--_s),
      #0000 90deg, var(--c) 0) 0 100%/calc(100% - var(--b)) calc(100% - var(--b)) border-box;
  transform: translate(calc(var(--d)/-1), var(--d));
  clip-path:
    polygon(var(--d) 0%,
      var(--d) 0%,
      100% 0%,
      100% calc(100% - var(--d)),
      100% calc(100% - var(--d)),
      var(--d) calc(100% - var(--d)));
  transition: 0.5s;
}

.hover2:hover {
  transform: translate(0, 0);
  clip-path:
    polygon(0% var(--d),
      var(--d) 0%,
      100% 0%,
      100% calc(100% - var(--d)),
      calc(100% - var(--d)) 100%,
      0% 100%);
}