20 CSS Link Hover Effect Designs 15 / 20
Ink Bleed Underline
Hand-drawn-look SVG underline that strokes in from left to right on hover via stroke-dasharray.
The code
<a href="#" class="cle-ink">
<span>Subscribe</span>
<svg class="cle-ink-line" viewBox="0 0 120 8" preserveAspectRatio="none" aria-hidden="true">
<path
d="M2 5 Q 30 1 60 4 T 118 5"
stroke="currentColor"
stroke-width="2.5"
fill="none"
stroke-linecap="round"
/>
</svg>
</a> <a href="#" class="cle-ink">
<span>Subscribe</span>
<svg class="cle-ink-line" viewBox="0 0 120 8" preserveAspectRatio="none" aria-hidden="true">
<path
d="M2 5 Q 30 1 60 4 T 118 5"
stroke="currentColor"
stroke-width="2.5"
fill="none"
stroke-linecap="round"
/>
</svg>
</a>.cle-ink {
position: relative;
display: inline-block;
padding-bottom: 8px;
color: #ffd479;
font:
600 16px/1.2 Georgia,
"Times New Roman",
serif;
text-decoration: none;
}
.cle-ink-line {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 8px;
color: #ffd479;
pointer-events: none;
}
.cle-ink-line path {
stroke-dasharray: 200;
stroke-dashoffset: 200;
transition: stroke-dashoffset 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.cle-ink:hover .cle-ink-line path,
.cle-ink:focus-visible .cle-ink-line path {
stroke-dashoffset: 0;
} .cle-ink {
position: relative;
display: inline-block;
padding-bottom: 8px;
color: #ffd479;
font:
600 16px/1.2 Georgia,
"Times New Roman",
serif;
text-decoration: none;
}
.cle-ink-line {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 8px;
color: #ffd479;
pointer-events: none;
}
.cle-ink-line path {
stroke-dasharray: 200;
stroke-dashoffset: 200;
transition: stroke-dashoffset 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.cle-ink:hover .cle-ink-line path,
.cle-ink:focus-visible .cle-ink-line path {
stroke-dashoffset: 0;
}