<div class="circular-1">1. Hover me </div>
<div class="circular-2">2. Hover me </div>
<div class="circular-3">3. Hover me </div>
<div class="circular-4">4. Hover me </div>
<div class="circular-5">5. Hover me </div>
<div class="circular-6">6. Hover me </div>
<div class="circular-7">7. Hover me </div>
<div class="circular-8">8. Hover me </div>
.circular-1 {
padding:0 10px;
line-height: 1.6em;
border-radius: 0;
transition: 0.3s 0.3s,border-radius 0.3s;
}
.circular-1:hover {
border-radius: 0.8em;
background: #000;
color:#fff;
transition: 0.3s,border-radius 0.3s 0.3s;
}
.circular-2 {
padding:0 15px;
line-height: 1.6em;
transition: 0.3s 0.3s,border-radius 0.3s;
}
.circular-2:hover {
background: #000;
color:#fff;
border-radius:1.2em 0.4em 1.2em 0.4em;
transition: 0.3s,border-radius 0.3s 0.3s;
}
.circular-3 {
padding:0 15px;
line-height: 1.6em;
-webkit-mask:
radial-gradient(farthest-side,#000 97%,#0000) center /1.6em 1.6em space,
linear-gradient(#000 0 0) center/100% var(--d,100%) no-repeat;
transition: 0.3s,background 0.3s 0.3s,color 0.3s 0.3s;
}
.circular-3:hover {
--d:70%;
border-radius: 1.6em;
background: #000;
color:#fff;
transition: 0.3s 0.3s,background 0.3s,color 0.3s;
}
.circular-4 {
padding:0 10px;
line-height: 1.6em;
border-radius: 1.6em;
-webkit-mask:
radial-gradient(farthest-side at bottom right,#0000 97%,#000) calc(50% + var(--d,0px)/2) 0 /var(--d,0px) 0.8em,
linear-gradient(#000 0 0);
-webkit-mask-repeat:no-repeat;
-webkit-mask-composite:destination-out;
mask-composite:exclude;
transition: 0.3s,background 0.3s 0.3s,color 0.3s 0.3s;
}
.circular-4:hover {
--d:0.8em;
border-radius: 1.6em 0 1.6em 1.6em;
background: #000;
color:#fff;
transition: 0.3s 0.3s,background 0.3s,color 0.3s;
}
.circular-5 {
padding:0 10px;
line-height: 1.6em;
border-radius: 0.8em;
-webkit-mask:
radial-gradient(farthest-side at bottom right,#0000 97%,#000) calc(50% + var(--d,0px)/2) 0 /var(--d,0px) 0.8em,
radial-gradient(farthest-side at bottom left ,#0000 97%,#000) calc(50% - var(--d,0px)/2) 0 /var(--d,0px) 0.8em,
linear-gradient(#000 0 0);
-webkit-mask-repeat:no-repeat;
-webkit-mask-composite:destination-out;
mask-composite:exclude;
transition: 0.3s,background 0.3s 0.3s,color 0.3s 0.3s;
}
.circular-5:hover {
--d:0.8em;
border-radius: 0 0 0.8em 0.8em;
background: #000;
color:#fff;
transition: 0.3s 0.3s,background 0.3s,color 0.3s;
}
.circular-6 {
padding:0 10px;
line-height: 1.6em;
border-radius: 0.8em;
-webkit-mask:
radial-gradient(farthest-side at top right,#0000 97%,#000) left calc(50% + var(--d,0px)/2) bottom 0 /var(--d,0px) 0.8em,
radial-gradient(farthest-side at top left ,#0000 97%,#000) right calc(50% + var(--d,0px)/2) bottom 0 /var(--d,0px) 0.8em,
radial-gradient(farthest-side at bottom right,#0000 97%,#000) left calc(50% + var(--d,0px)/2) top 0 /var(--d,0px) 0.8em,
radial-gradient(farthest-side at bottom left ,#0000 97%,#000) right calc(50% + var(--d,0px)/2) top 0 /var(--d,0px) 0.8em,
linear-gradient(#000 0 0);
-webkit-mask-repeat:no-repeat;
-webkit-mask-composite:destination-out;
mask-composite:exclude;
transition: 0.3s,background 0.3s 0.3s,color 0.3s 0.3s;
}
.circular-6:hover {
--d:0.8em;
border-radius: 0 ;
background: #000;
color:#fff;
transition: 0.3s 0.3s,background 0.3s,color 0.3s;
}
.circular-7 {
padding:0 0.4em;
line-height: 1.6em;
-webkit-mask:
radial-gradient(farthest-side at right,#0000 97%,#000) 0 0 /var(--d,0px) 0.8em repeat-y,
radial-gradient(farthest-side at left ,#0000 97%,#000) 100% 0 /var(--d,0px) 0.8em repeat-y,
linear-gradient(#000 0 0);
-webkit-mask-composite:destination-out;
mask-composite:exclude;
transition: 0.3s,background 0.3s 0.3s,color 0.3s 0.3s;
}
.circular-7:hover {
--d:0.4em;
background: #000;
color:#fff;
transition: 0.3s 0.3s,background 0.3s,color 0.3s;
}
.circular-8 {
padding:0.2em 0.3em;
line-height: 1.6em;
-webkit-mask:
radial-gradient(farthest-side at bottom,#0000 97%,#000) top /0.8em var(--d,0px) repeat-x,
radial-gradient(farthest-side at top ,#0000 97%,#000) bottom /0.8em var(--d,0px) repeat-x,
linear-gradient(#000 0 0);
-webkit-mask-composite:destination-out;
mask-composite:exclude;
transition: 0.3s,background 0.3s 0.3s,color 0.3s 0.3s;
}
.circular-8:hover {
--d:0.4em;
background: #000;
color:#fff;
transition: 0.3s 0.3s,background 0.3s,color 0.3s;
}
/**/
[class] {
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.