Website elementsControls & details
Link effects
An underline animation CSS, built into your site with no plugin and no library. Eleven hover-and-focus styles for links, CSS only: underline-slide, underline-grow, brackets, highlight, box, strike-to-underline, arrow, circle, and three of ours, peek, swash and tag. A class on any <a>, or the <Link effect> wrapper. Focus shows what hover shows, reduced motion shows the end state at once, and the text never drops below 4.5:1 mid-animation.
lk-underline-slideIn from the left, out to the right.
lk-underline-growUnderlined at rest, so it works in a paragraph.
lk-bracketsBrackets close in.
lk-highlightA marker sweeps behind the words.
lk-boxA frame draws itself.
lk-strike-to-underlineStrikes through, then drops to an underline.
lk-arrowThe arrow’s room is kept, so nothing moves.
lk-circleRinged by hand.
lk-peekOurs: the answer peeks in. data-peek="$49/mo".
lk-swashOurs: a hand-drawn line draws itself.
lk-tagOurs: a pill fills, the text turning with it.
In running text, keep an underline at rest: this sentence links to the planting guide, which thickens on hover and on focus and wraps across lines like any other link.
Links that answer back when you point at them, and never leave a keyboard user or a slow eye behind.
Also called
UABB Creative LinkPowerPack Link Effectscreative linkunderline animationlink hover effectsanimated underlinetext hover effects
What it replaces
- UABB “Creative Link” (Beaver Builder)
- PowerPack “Link Effects”
- hover.css and underline snippets pasted into a theme
Good for
Navigation, a card’s call to action, footer links, a “Read more”: short links that should feel alive. underline-grow also suits links in running text, because it is underlined at rest. peek suits a link whose destination has a one-word answer: “Pricing” → “$49/mo”, “Hours” → “Open now”.
Not for
Links in a paragraph with any effect that has no underline at rest (all but underline-grow and peek): a link must look like a link before anyone points at it, and color alone does not say so. Buttons, which are not links. More than one or two effects on a site: pick one for navigation and one for calls to action, and keep them.
Accessibility
Written so the page works for every visitor, whether they browse with a mouse, a keyboard or a screen reader, and whether or not they have asked for less motion.
- Every effect fires on :focus-visible exactly as on :hover (one selector, `:is(:hover, :focus-visible)`), and the browser’s own focus ring stays.
- prefers-reduced-motion: every transition sits inside `(prefers-reduced-motion: no-preference)`, so otherwise the end state appears at once. Nothing plays by itself.
- The text never drops below 4.5:1 mid-animation. Effects move decorations, not the text color; highlight pins the text to --lk-ink, which passes on the page and on the marker; tag paints its text and fill as two layers of one background moving together, so each pixel of text is one passing pair or the other. `npm run check` computes the fallback pairs.
- Decorative glyphs (the brackets, the arrow) are silent to screen readers, and the swash SVG is aria-hidden. The peek words are read as part of the link’s name (“Pricing $49/mo”).
- Windows High Contrast (forced colors): system link colors, and the underline-based effects keep a real underline.
- No JavaScript at all, so the render without it is the same.
Where it's live
- superherotech.ai: /elements/link-effects/ (demo)
How to ask for it
“The link-effects on our home page, with …”
Name it, say which page and which part of the page it goes on, and say what goes in it: your photos, your words, your colors. That is a complete request. We build it, you approve it, and it goes live. If you know it by another name, from WordPress or from another site, that works too.
More elements you can ask for: Before / After, Particle field, Mega menu, Video background, Parallax band, Scroll reveal, Business hours, News ticker, Flip box, Instagram feed, Accordion / FAQ, Card slider, Tabs, Info list, Video player, Testimonial carousel, Icon library, Animated text, Cookie consent, Animated background, Modal box, Announcement bar, Image hotspots, Info circle, Slide box, Countdown, Content toggle, Off-canvas panel, Video gallery, Map and directions, Tabcordion, Tooltip, Responsive table, Notice, Toast, Loading, Menu button, Radio group, Stepper, Tags, Scrollbox, Sticker. Or see all of them working.
More in Controls & details
See them all working- Menu button
Tuck a handful of actions — share, export, edit, delete — behind one tidy button that works the same with a mouse, a keyboard or a screen reader.
- Radio group
Let people pick one option at a glance — as a list, as big cards with an icon, or as a pill switch — and it still posts like the plain form it is.
- Tags
Show the topics, features or filters that belong to something, and let visitors clear a filter with one tap.
- Cookie consent
A consent bar that is yours: no monthly CMP fee, nothing loads from Google until the visitor has said yes where the law needs a yes.
Want the link effects on your site?
Tell us about the business. We build the site with it, launch it, and change it whenever you ask.