20 CSS Link Hover Effect Designs 04 / 20
Encircled
An SVG ellipse strokes itself around the linked text on hover via stroke-dasharray — a pen circling a phrase.
The code
<div class="cle-circle-bg">
<p class="cle-circle-wrap">
Check out
<a href="#" class="cle-circle">
the link
<svg class="cle-circle-svg" viewBox="0 0 100 36" aria-hidden="true">
<ellipse
cx="50"
cy="18"
rx="46"
ry="14"
fill="none"
stroke="currentColor"
stroke-width="2"
/>
</svg>
</a>
here
</p>
</div> <div class="cle-circle-bg">
<p class="cle-circle-wrap">
Check out
<a href="#" class="cle-circle">
the link
<svg class="cle-circle-svg" viewBox="0 0 100 36" aria-hidden="true">
<ellipse
cx="50"
cy="18"
rx="46"
ry="14"
fill="none"
stroke="currentColor"
stroke-width="2"
/>
</svg>
</a>
here
</p>
</div>.cle-circle-bg {
padding: 24px;
background: #f4f5f9;
border-radius: 10px;
}
.cle-circle-wrap {
margin: 0;
font:
500 16px/1.5 system-ui,
sans-serif;
color: #2a2a3e;
}
.cle-circle {
position: relative;
display: inline-block;
padding: 0 6px;
color: #6b8cff;
font-weight: 600;
text-decoration: none;
}
.cle-circle-svg {
position: absolute;
inset: -4px -2px;
width: calc(100% + 4px);
height: calc(100% + 8px);
color: #6b8cff;
pointer-events: none;
overflow: visible;
}
.cle-circle-svg ellipse {
stroke-dasharray: 200;
stroke-dashoffset: 200;
transform-origin: center;
transform: rotate(-3deg);
transition: stroke-dashoffset 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.cle-circle:hover .cle-circle-svg ellipse,
.cle-circle:focus-visible .cle-circle-svg ellipse {
stroke-dashoffset: 0;
} .cle-circle-bg {
padding: 24px;
background: #f4f5f9;
border-radius: 10px;
}
.cle-circle-wrap {
margin: 0;
font:
500 16px/1.5 system-ui,
sans-serif;
color: #2a2a3e;
}
.cle-circle {
position: relative;
display: inline-block;
padding: 0 6px;
color: #6b8cff;
font-weight: 600;
text-decoration: none;
}
.cle-circle-svg {
position: absolute;
inset: -4px -2px;
width: calc(100% + 4px);
height: calc(100% + 8px);
color: #6b8cff;
pointer-events: none;
overflow: visible;
}
.cle-circle-svg ellipse {
stroke-dasharray: 200;
stroke-dashoffset: 200;
transform-origin: center;
transform: rotate(-3deg);
transition: stroke-dashoffset 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.cle-circle:hover .cle-circle-svg ellipse,
.cle-circle:focus-visible .cle-circle-svg ellipse {
stroke-dashoffset: 0;
}