Seven hover effects for headings, menu labels and short phrases: a colour that sweeps across the letters, text that slides up to an identical copy, letters that spread apart, a 3D extrusion that lifts, letters that flip in turn, a strike-through that draws and a covered word that is revealed.
Hovering a heading sweeps a second colour across the letters from left to right. The heading has a two-colour background split at 50 percent, clipped to the text and twice as wide, and hover shifts its position. Focus within the card triggers it too.
On hover the label slides up out of view and an identical copy slides up into its place, a crisp effect for nav items and buttons. The copy is a pseudo-element reading the text from a data attribute, so it is not read twice by screen readers.
Uppercase text spreads its letters apart on hover, a refined effect for fashion and luxury menus. The link has a fixed width and centred text so expanding letters do not push the items around it.
Stacked text-shadows build a solid 3D extrusion under the word, and on hover the text rises while the extrusion lengthens. Each shadow layer is 1px further down and to the right, and the hover state adds layers for the deeper look.
Each letter turns a full circle on the y-axis in sequence when the word is hovered. Letters are spans with an index for the delay, wrapped in an element with an aria-label holding the whole word, and the spans are aria-hidden.
A line draws through the old price when the line is hovered, useful for prices, to-do items or a playful menu. It is decoration only, since the words Was and now already carry the meaning. The line is a pseudo-element scaled from zero along the x axis with a slight skew.
View code
<p class="th6">Was <span>$120</span> now <b>$84</b></p>
Part of the headline is covered by a solid block that slides away on hover or focus to reveal the punchline. The hidden words are still real text in the DOM, so screen readers read the full sentence whether or not the block has moved.
If text reacts to the pointer, people assume it does something. Put these effects on links and buttons, and mirror the hover state on :focus-visible so keyboard users see it too.
Gradient tricks with background-clip
Clipping a two-colour background to the text and moving its position paints a colour sweep across the letters. Keep a plain color as a fallback inside @supports.
Duplicates must not be read twice
The slide-to-copy effect draws its second line with a pseudo-element from a data- attribute, so the label is announced once. Split-letter effects put the real word in an aria-label on the link.
Stop layout from shifting
Effects that change letter spacing or weight change the text's width. Give the element a fixed width or use transforms so neighbouring items do not move on hover.
Frequently asked questions
Do these work on touch screens?
The hover state shows briefly on tap. The text is always fully readable without it.
Which effect is best for a nav menu?
The slide-to-copy and letter-spacing effects suit menus; fills and 3D shadows suit single headings.
Will the 3D shadow hurt performance?
Text shadows are cheap at this size. Avoid animating dozens of them at once.