20 CSS Link Hover Effect Designs
Tilde Morph
A straight underline morphs into a tilde-style wave on hover via background-image swap. Editorial inline-menu pattern — line on rest, wave on attention.
Tilde Morph the 2nd of 20 designs in the 20 CSS Link Hover Effect Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<p class="cle-tilde-row"> <a href="#" class="cle-tilde">Root</a> <a href="#" class="cle-tilde">Perfect Fifth</a> <a href="#" class="cle-tilde">Perfect Fourth</a> <a href="#" class="cle-tilde">Major Third</a> </p>
.cle-tilde-row {
margin: 0;
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.cle-tilde {
position: relative;
padding-bottom: 8px;
color: #ffd479;
font:
500 15px/1.2 Georgia,
"Times New Roman",
serif;
text-decoration: none;
background-image: linear-gradient(#ffd479, #ffd479);
background-repeat: no-repeat;
background-size: 100% 1px;
background-position: 0 100%;
transition:
background-image 0.4s,
background-size 0.4s;
}
.cle-tilde:hover,
.cle-tilde:focus-visible {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 6' preserveAspectRatio='none'><path d='M0 3 Q 15 0 30 3 T 60 3' stroke='%23ffd479' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
background-size: 100% 6px;
}