<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.