<div class="inverted-1">1. Hover me </div>
<div class="inverted-2">2. Hover me </div>
<div class="inverted-3">3. Hover me </div>
<div class="inverted-4">4. Hover me </div>
<div class="inverted-5">5. Hover me </div>
<div class="inverted-6">6. Hover me </div>
<div class="inverted-7">7. Hover me </div>
<div class="inverted-8">8. Hover me </div>
.inverted-1 {
padding: 10px;
background:
conic-gradient(from 135deg at top ,#fff 90deg,#000 0) ,
conic-gradient(from -45deg at bottom,#fff 90deg,#000 0) ,
conic-gradient(from 135deg at top ,#000 90deg,#0000 0),
conic-gradient(from -45deg at bottom,#000 90deg,#0000 0);
-webkit-background-clip: text,text,padding-box,padding-box;
background-clip: text,text,padding-box,padding-box;
background-size: 230% 50%;
background-position: top right,bottom right;
background-repeat: no-repeat;
transition: 1s linear;
}
.inverted-1:hover {
background-position: top left,bottom left;
}
.inverted-2 {
padding: 10px;
background:
conic-gradient(from 135deg at top ,#fff 90deg,#000 0) ,
conic-gradient(from -45deg at bottom,#fff 90deg,#000 0) ,
conic-gradient(from 135deg at top ,#000 90deg,#0000 0),
conic-gradient(from -45deg at bottom,#000 90deg,#0000 0),
#000;
-webkit-background-clip: text,text,padding-box,padding-box,text;
background-clip: text,text,padding-box,padding-box,text;
background-size: 100% 50%;
background-position: 50% -100%,50% 200%;
background-repeat: repeat-x;
transition: 0.4s linear,background-position 0.3s 0.5s;
}
.inverted-2:hover {
background-position: 50% 0,50% 100%;
background-size: 10% 50%;
transition: 0.3s,background-size 0.4s 0.3s linear;
}
.inverted-3 {
padding: 0 10px;
line-height: 1em;
background:
linear-gradient(#fff 0 0),
linear-gradient(#000 0 0),
#000;
-webkit-background-clip: text,padding-box;
background-clip: text,padding-box;
background-size: 100% 50%;
background-position: 100vmax 100%;
box-shadow: 100vmax 0.5em 0 0 #0000;
background-repeat: no-repeat;
transition: 0.5s;
}
.inverted-3:hover {
background-position: 0 100%;
box-shadow: 0 0.5em 0 0 #000;
}
.inverted-4 {
padding: 0 10px;
line-height: 1.4em;
background:
linear-gradient(#fff 0 0),
linear-gradient(#000 0 0),
#000;
-webkit-background-clip:text,padding-box;
background-clip:text,padding-box;
background-size: 100% 50%;
background-position: -100vmax 100%;
box-shadow: -100vmax 0.7em 0 0 #0000;
clip-path: polygon(-100vmax 0,100% 0,100% calc(100% + 0.7em),-100vmax calc(100% + 0.7em));
background-repeat: no-repeat;
transition: 0.4s, box-shadow 0.3s 0.4s,background-position 0.3s 0.4s;
}
.inverted-4:hover {
background-position: 0 100%;
background-size: 100% 100%;
box-shadow: 0 0.7em 0 0 #000;
clip-path: polygon(-100vmax 0,100% 0,100% 100%,-100vmax 100%);
transition: 0.4s, clip-path 0.3s 0.4s,background-size 0.3s 0.4s;
}
.inverted-5 {
padding: 10px;
background:
radial-gradient(100% 100% at top left,#fff 98%,#000) ,
radial-gradient(100% 100% at bottom right,#fff 98%,#000) ,
radial-gradient(100% 100% at top left,#000 98%,#0000) ,
radial-gradient(100% 100% at bottom right,#000 98%,#0000) ,
#000;
-webkit-background-clip: text,text,padding-box,padding-box,text;
background-clip: text,text,padding-box,padding-box,text;
background-size: 0% 0%;
background-position: top left, bottom right;
background-repeat: no-repeat;
transition: 0.5s;
}
.inverted-5:hover {
background-size: 50% 100%;
}
.inverted-6 {
--cos45:0.7071;
--g1: #000 calc(0.7em*var(--cos45)),#fff 0 calc(0.7em*var(--cos45) + 25px),#000 0;
--g2: #0000 calc(0.7em*var(--cos45)),#000 0 calc(0.7em*var(--cos45) + 25px),#0000 0;
padding: 0 10px;
line-height: 1.4em;
background:
linear-gradient(135deg,var(--g1)) top 0 right var(--_p,-100%),
linear-gradient(135deg,var(--g2)) top 0 right var(--_p,-100%),
linear-gradient( 45deg,var(--g1)) bottom 0 right var(--_p,-100%),
linear-gradient( 45deg,var(--g2)) bottom 0 right var(--_p,-100%),
linear-gradient(-45deg,var(--g1)) bottom 0 left var(--_p,-100%),
linear-gradient(-45deg,var(--g2)) bottom 0 left var(--_p,-100%),
linear-gradient(-135deg,var(--g1)) top 0 left var(--_p,-100%),
linear-gradient(-135deg,var(--g2)) top 0 left var(--_p,-100%),
#000;
-webkit-background-clip: text,padding-box;
background-clip: text,padding-box;
background-size: 50% 50%;
background-repeat: no-repeat;
transition: 0.5s;
}
.inverted-6:hover {
--_p:0%;
}
.inverted-7 {
padding:0 10px;
line-height: 1.4em;
background:
conic-gradient(from -115deg,#fff 50deg,#0000 0) var(--_p,-1.2em) 0/2.4em 1.2em,
conic-gradient(from -115deg,#000 50deg,#0000 0) var(--_p,-1.2em) 0/2.4em 1.2em,
linear-gradient(90deg,#fff calc(100% - 1.2em),#0000 0) bottom 50% left 0/var(--_d,0%) 15px,
linear-gradient(90deg,#000 calc(100% - 1.2em),#0000 0) bottom 50% left 0/var(--_d,0%) 15px,
#000;
-webkit-background-clip: text,padding-box;
background-clip: text,padding-box;
background-repeat: no-repeat;
transition: 0.5s;
}
.inverted-7:hover {
--_d: 100%;
--_p: calc(100% + 1.2em);
}
.inverted-8 {
--x: 140px;
padding: 0 10px;
line-height: 1.4em;
box-shadow: 0 0 0px 100px var(--c,#0000);
background:
conic-gradient(from 60deg,#fff 0 60deg,#000 0),
conic-gradient(from 60deg,#000 0 60deg,#0000 0),
#000;
-webkit-background-clip: text,padding-box,text;
background-clip: text,padding-box,text;
background-size: 300px 300px;
background-position: calc(50% + var(--x)) 50%;
background-repeat: no-repeat;
clip-path: polygon(1.5px 1.5px,calc(50% + 0.7em*1.73 - 1.5px + var(--x)) 1.5px,calc(50% + 160px + var(--x)) calc(50% - 80px),calc(50% + 160px + var(--x)) calc(50% + 80px),calc(50% + 0.7em*1.73 - 1.5px + var(--x)) calc(100% - 1.5px),1.5px calc(100% - 1.5px));
transition: 0.5s;
}
.inverted-8:hover {
--p:0%;
--c:#000;
--x:0px;
}
/**/
[class] {
font-weight: bold;
color:#0000;
display:inline-block;
font-size:40px;
font-family:sans-serif;
margin:25px;
cursor:pointer;
}
body {
text-align:center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.