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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.