<h3 class="d-1">Hover Me</h3>
<h3 class="d-1" style="--b:.2em;--d:35px;--c:purple">Hover Me</h3>
<h3 class="d-1" style="--b:3px;--d:10px;--c:darkred">Hover Me</h3>

.d-1 {
  --c: #1095c1; /* 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;
}
.d-1: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%
   );
}


body {
  height: 100vh;
  margin: 0;
  display: grid;
  grid-auto-flow: column;
  gap: 50px;
  place-content: center;
  align-items: end;
}
h3 {
  font-family: system-ui, sans-serif;
  font-size: 2.2rem;
  margin:0;
  cursor: pointer;
  padding: 0 .1em;
}