<div class="sides-1">1. Hover me </div>
<div class="sides-2">2. Hover me </div>
<div class="sides-3">3. Hover me </div>
<div class="sides-4">4. Hover me </div>
<div class="sides-5">5. Hover me </div>
<div class="sides-6">6. Hover me </div>
<div class="sides-7">7. Hover me </div>
@property --t{
syntax: '<percentage>';
inherits: false;
initial-value: 0%;
}
@property --r{
syntax: '<percentage>';
inherits: false;
initial-value: 0%;
}
@property --b{
syntax: '<percentage>';
inherits: false;
initial-value: 0%;
}
@property --l{
syntax: '<percentage>';
inherits: false;
initial-value: 0%;
}
@property --tt{
syntax: '<percentage>';
inherits: false;
initial-value: 0%;
}
@property --rr{
syntax: '<percentage>';
inherits: false;
initial-value: 0%;
}
@property --bb{
syntax: '<percentage>';
inherits: false;
initial-value: 0%;
}
@property --ll{
syntax: '<percentage>';
inherits: false;
initial-value: 0%;
}
.sides-1 {
padding:8px;
background:
linear-gradient(currentColor 0 0) 0 0 /var(--t) 3px,
linear-gradient(currentColor 0 0) 100% 0 /3px var(--r),
linear-gradient(currentColor 0 0) 100% 100% /var(--b) 3px,
linear-gradient(currentColor 0 0) 0 100% /3px var(--l);
background-repeat:no-repeat;
transition: --l .2s,--b .2s .2s,--r .2s .4s,--t .2s .6s;
transition-timing-function: linear;
}
.sides-1:hover {
--t:100%;
--r:100%;
--b:100%;
--l:100%;
transition: --t .2s,--r .2s .2s,--b .2s .4s,--l .2s .6s;
}
.sides-2 {
padding:8px;
background:
linear-gradient(currentColor 0 0) 100% 0 /var(--t) 3px,
linear-gradient(currentColor 0 0) 100% 100% /3px var(--r),
linear-gradient(currentColor 0 0) 0 100% /var(--b) 3px,
linear-gradient(currentColor 0 0) 0 0 /3px var(--l);
background-repeat:no-repeat;
transition: --t .2s,--r .2s .2s,--b .2s .4s,--l .2s .6s;
transition-timing-function: linear;
}
.sides-2:hover {
--t:100%;
--r:100%;
--b:100%;
--l:100%;
transition: --l .2s,--b .2s .2s,--r .2s .4s,--t .2s .6s;
}
.sides-3 {
padding:8px;
background:
linear-gradient(90deg,currentColor 50%,#0000 0) 100% 0,
linear-gradient(currentColor 0 0) 100% 0 ,
linear-gradient(-90deg,currentColor 50%,#0000 0) 0% 100%,
linear-gradient(currentColor 0 0) 0 100%;
background-size: 200% 3px,3px 0%;
background-repeat:no-repeat;
transition: .3s,background-position .3s .3s;
}
.sides-3:hover {
background-position: 0 0,100% 0,100% 100%,0 100%;
background-size:200% 3px,3px 100%;
transition: .3s,background-size .3s .3s;
}
.sides-4 {
padding:8px;
background:
linear-gradient(-90deg,currentColor 50%,#0000 0) 0 0,
linear-gradient(currentColor 0 0) 0 0 ,
linear-gradient(90deg,currentColor 50%,#0000 0) 100% 100%,
linear-gradient(currentColor 0 0) 100% 100%;
background-size: 200% 3px,3px 0%;
background-repeat:no-repeat;
transition: .3s,background-size .3s .3s;
}
.sides-4:hover {
background-position: 100% 0,0 0,0 100%,100% 100%;
background-size:200% 3px,3px 100%;
transition: .3s,background-position .3s .3s;
}
.sides-5 {
padding:8px;
background:
linear-gradient( 90deg,currentColor 50%,#0000 0) 100% 0,
linear-gradient(180deg,currentColor 50%,#0000 0) 0 100%,
linear-gradient(currentColor 0 0) 100% 0 ,
linear-gradient(currentColor 0 0) 0 100%;
background-size: 200% 3px,3px 200%,3px 0%,0% 3px;
background-repeat:no-repeat;
transition: .3s,background-position .3s .3s;
}
.sides-5:hover {
background-position: 0 0,0 0,100% 0,0 100%;
background-size: 200% 3px,3px 200%,3px 100%,100% 3px;
transition: .3s,background-size .3s .3s;
}
.sides-6 {
padding:8px;
background:
linear-gradient(-90deg,currentColor 50%,#0000 0) 0 0,
linear-gradient( 0deg,currentColor 50%,#0000 0) 0 0,
linear-gradient(currentColor 0 0) 100% 100%,
linear-gradient(currentColor 0 0) 100% 100%;
background-size: 200% 3px,3px 200%,3px 0%,0% 3px;
background-repeat:no-repeat;
transition: .3s,background-size .3s .3s;
}
.sides-6:hover {
background-position: 100% 0,0 100%,100% 0,0 100%;
background-size: 200% 3px,3px 200%,3px 100%,100% 3px;
transition: .3s,background-position .3s .3s;
}
.sides-7 {
--m:4px;
--s:3px;
padding:15px;
background:
linear-gradient(currentColor 0 0) calc(var(--m) + var(--s)) 0 /var(--t) var(--s),
linear-gradient(currentColor 0 0) 100% 0 /var(--s) var(--r),
linear-gradient(currentColor 0 0) 100% 100% /var(--b) var(--s),
linear-gradient(currentColor 0 0) 0 calc(100% + (var(--m) + var(--s))) /var(--s) var(--l),
linear-gradient(currentColor 0 0) calc(-1*(var(--s) + var(--m))) calc(var(--s) + var(--m))/var(--tt) var(--s),
linear-gradient(180deg,currentColor calc(100% - 2*(var(--s) + var(--m))),#0000 0) calc(100% - (var(--s) + var(--m))) calc(var(--s) + var(--m)) /var(--s) var(--rr),
linear-gradient(-90deg,currentColor calc(100% - 2*(var(--s) + var(--m))),#0000 0) calc(100% - (var(--s) + var(--m))) calc(100% - (var(--s) + var(--m))) /var(--bb) var(--s),
linear-gradient(currentColor 0 0) calc(var(--s) + var(--m)) calc(100% - (var(--s) + var(--m))) /var(--s) var(--ll);
background-repeat:no-repeat;
transition: --t .2s 1.4s,--r .2s 1.2s,--b .2s 1s,--l .2s .8s,--tt .2s .6s,--rr .2s .4s,--bb .2s .2s,--ll .2s;
transition-timing-function: linear;
}
.sides-7:hover {
--t:100%;
--r:100%;
--b:100%;
--l:100%;
--tt:100%;
--rr:100%;
--bb:100%;
--ll:100%;
transition: --t .2s,--r .2s .2s,--b .2s .4s,--l .2s .6s,--tt .2s .8s,--rr .2s 1s,--bb .2s 1.2s,--ll .2s 1.4s;
}
/**/
[class] {
display:inline-block;
font-size:40px;
font-family:sans-serif;
margin:25px;
cursor:pointer;
}
div[class]:nth-child(odd) {
color:darkblue;
}
body {
text-align:center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.