Text Link with Animated Curved Underline

Text Link with Animated Curved Underline

Subtle motion can turn an ordinary text link into a memorable interaction. This example is designed for buttons and calls to action where you want the link to feel responsive, modern, and slightly playful while still remaining clean and readable.

Instead of using a static border or a basic CSS underline, we use SVG to draw a curved line beneath the text. That gives us more control over the shape, timing, and motion of the underline. The result works especially well for hero sections, navigation labels, feature links, and landing page CTAs.

Why use an animated curved underline?

• It adds personality without adding clutter.
• It directs attention toward the link text naturally.
• It feels premium and intentionally designed.
• It is lightweight compared with more complex animation systems.
• It works well as a CTA accent in modern UI layouts.

Best use cases

This pattern is especially effective when the text itself needs to remain simple and readable, but the interaction should still feel dynamic. Common use cases include:

• Primary action links such as Get Started or See Pricing
• Inline promotional links inside marketing copy
• Navigation items that need a refined hover state
• Blog or portfolio links that should stand out on hover

How the animation works

The effect is built from two layers: the text link and a curved SVG line positioned underneath it. On hover, the line animates from a hidden or reduced state into a fully visible curve. Depending on your preferred style, the curve can be drawn using stroke-dasharray and stroke-dashoffset, or animated with a path transition and easing.

The key design idea is to make the underline feel like it is being drawn under the text rather than simply fading in. This creates a more tactile interaction and makes the link feel responsive to the user.

Example HTML structure

The markup can stay simple. The SVG sits inside the link so the underline is semantically attached to the text:

<a class="cta-link" href="#">
  <span>Explore the Demo</span>
  <svg class="cta-link__underline" viewBox="0 0 180 24" aria-hidden="true" preserveAspectRatio="none">
    <path d="M4 16 C 32 4, 58 4, 90 14 S 150 24, 176 10" />
  </svg>
</a>

This markup keeps the text accessible and the underline decorative. The aria-hidden="true" attribute ensures assistive technologies focus on the link text, not the decorative motion.

Simple CSS for the effect

You can create the animation with a combination of layout styles and stroke animation. The example below keeps the link neat and centered while animating the SVG underline on hover.

.cta-link {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  color: #111;
  font-weight: 600;
  line-height: 1.1;
}

.cta-link__underline {
  width: 100%;
  height: 18px;
  margin-top: 2px;
  overflow: visible;
}

.cta-link__underline path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  transition: stroke-dashoffset 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.cta-link:hover .cta-link__underline path,
.cta-link:focus-visible .cta-link__underline path {
  stroke-dashoffset: 0;
}

This version uses a single path and a smooth easing curve. It feels elegant, precise, and easy to maintain. If you want a more organic style, you can also animate the curve slightly on hover by shifting the path points or using a second path layer for a layered motion effect.

Design tips for better results

• Keep the curve subtle. A dramatic wave can distract from the text.
• Match the underline width to the word length. Short labels benefit from tighter curves; longer labels can support more sweeping motion.
• Use consistent stroke thickness. This helps the animation feel polished in both light and dark UI themes.
• Choose easing carefully. A soft, spring-like ease works well for CTA links, while a linear motion feels more technical.
• Support keyboard users. Include :focus-visible so the effect appears during keyboard navigation too.

Making it feel like a real CTA

For a call-to-action link, the underline should support the message, not compete with it. Pair the animation with strong copy such as Start Free, View Pricing, or Read the Case Study. If the link is part of a button-like layout, increase spacing around the label and use a slightly heavier font weight so the motion reads as intentional.

You can also combine the underline with a small arrow, a color shift, or a gentle scale effect on hover. When used together carefully, these details create a richer interaction while keeping the interface clean.

Accessibility considerations

Animated UI should always remain easy to use. This pattern is safe when you keep the animation decorative and preserve the link’s text as the primary accessible label. Consider these points:

• Avoid relying on color alone to show the hover state.
• Keep the link contrast strong enough against the background.
• Use focus-visible so keyboard users receive the same feedback.
• Respect reduced motion preferences if you add additional movement beyond the underline draw.

Optional reduced-motion fallback

If you want to make the effect more inclusive, you can simplify the transition when users prefer reduced motion:

@media (prefers-reduced-motion: reduce) {
  .cta-link__underline path {
    transition: none;
    stroke-dashoffset: 0;
  }
}

This ensures the underline stays visible without requiring motion, while preserving the visual style of the link.

Where this SVG animation example shines

The animated curved underline is a great fit for SVG-Animation.com because it demonstrates how SVG can be used for more than icons and illustrations. It shows how a small motion detail can improve usability, add brand character, and create a more engaging click target.

Use it when you want a link to feel elegant and interactive, especially in designs that value minimalism with a touch of motion. It is a small effect, but in the right context, it makes the interface feel alive.

Final takeaway

If you are looking for a stylish, practical SVG animation example for buttons and calls to action, this text link with an animated curved underline is a strong choice. It is easy to implement, visually distinctive, and flexible enough to adapt to many UI styles. With the right curve, timing, and spacing, a simple link can become a polished interactive element that encourages users to click.