<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;
}