NewCSS + small JS · text-shadow · transform

Text Roll

The label rolls up out of sight and a copy in the accent colour rolls in from below.

A free text roll hover effect in HTML and CSS (with a few lines of JavaScript). Also known as rolling text button, text slide up hover, vertical text swap or split text hover.

Class: .CCRoll
Weight: 1.3 KB
Needs: CSS + a few lines of JS
Best for: Navigation, buttons, tab bars

Tune it

Every snippet on this page follows these settings.

How the Text Roll hover effect works

Script wraps each label in a small clipping box.
Inside it, the label carries a text-shadow copy of itself 1.5em below, in the accent colour.
On hover the label slides up 1.5em: the original leaves the box and the coloured copy lands exactly where it was.

Add it to your site

Add the styles. Link https://coyoteconcept.com/lab/cc-lab.css once, or paste the CSS from any snippet below.
Set a colourway. Wrap your content in class="CCTheme CCEmber", or any other colourway.
Add the classes. For example <button class="CCButton CCRoll">.
Add the script. Include https://coyoteconcept.com/lab/cc-lab.js, or the few lines of JavaScript in the snippet.

Core components

Text Roll on button, tabs, dropdown, card.

More ways to use it

The same class on nav bar, headline, badge.

The Text Roll code

The plain CSS and JavaScript behind the effect. Colours, speed and strength come from the --cc- custom properties; the snippets above bundle it with the component styles and your settings.

Show the CSS

.CCRoll .CCRoll-t { display: inline-block; overflow: hidden; padding: .15em 0; margin: -.15em 0; vertical-align: bottom; }
.CCRoll .CCRoll-in {
  display: inline-block;
  text-shadow: 0 1.5em var(--cc-accent);
  transition: transform calc(.45s / var(--cc-speed)) cubic-bezier(.6, 0, .2, 1);
}
.CCRoll:is(:hover, :focus-visible, :focus-within) .CCRoll-in { transform: translateY(-1.5em); }
/* on an accent-filled label (solid button, the selected tab) the copy keeps the label's own colour */
.CCRoll:is(.CCButton--solid, .CCBadge) .CCRoll-in,
.CCRoll [aria-selected="true"] .CCRoll-in { text-shadow: 0 1.5em currentColor; }
@media (prefers-reduced-motion: reduce) { .CCRoll .CCRoll-in { transition: none; } }

Show the JavaScript

document.querySelectorAll(".CCRoll").forEach(function (el) {
  if (el.dataset.ccRoll) return; el.dataset.ccRoll = 1;
  var targets = el.matches("button, h1, h2, h3, .CCBadge") ? [el] : [].slice.call(el.querySelectorAll("h3, a, [role=tab]"));
  targets.forEach(function (t) {
    [].slice.call(t.childNodes).forEach(function (node) {
      if (node.nodeType !== 3 || !node.textContent.trim()) return;
      var box = document.createElement("span"), inner = document.createElement("span");
      box.className = "CCRoll-t"; inner.className = "CCRoll-in"; inner.textContent = node.textContent.trim();
      box.appendChild(inner); t.replaceChild(box, node);
    });
  });
});

Pairs well with

Avoid on the same element Howl Glitch (text), Text Scramble (text), Letter Wave (text), Squiggle (text), Focus Blur (text), Flip (text).

Browser support

Chrome & Edge	0+
Safari	0+
Firefox	0+

Older browsers show the element without the effect: nothing breaks.

Accessibility

It's one real label plus a shadow, so screen readers read it once.
Plays on keyboard focus too.
Swaps instantly under reduced motion.

Performance

1.3 KB of code, no libraries.
Animates transforms, opacity and gradients, which browsers handle cheaply.
This page pauses every animation that’s scrolled out of view. Worth copying if you use lots of them.

Questions about Text Roll

What is a text roll hover effect?

The label rolls up out of sight and a copy in the accent colour rolls in from below. Text Roll is a free text roll hover effect, also known as rolling text button or text slide up hover, that works on buttons, tab bars, dropdowns, cards and more.

How do you make a text roll hover effect in CSS?

Script wraps each label in a small clipping box. Inside it, the label carries a text-shadow copy of itself 1.5em below, in the accent colour. On hover the label slides up 1.5em: the original leaves the box and the coloured copy lands exactly where it was.

How do I add Text Roll to a button?

Add the class CCRoll next to CCButton, inside an element with the CCTheme class, then include the Text Roll CSS and its few lines of JavaScript. The Copy button on this page gives you all of it in one snippet.

Does Text Roll need JavaScript?

Yes, a few lines. They're included in every snippet and in the hosted cc-lab.js file.

Which browsers support Text Roll?

Chrome and Edge 0+, Safari 0+ and Firefox 0+. Older browsers show the element without the effect, so nothing breaks.

Is Text Roll accessible?

It's one real label plus a shadow, so screen readers read it once. Plays on keyboard focus too. Swaps instantly under reduced motion.

Can I use Text Roll in React, Tailwind, WordPress, Shopify, Webflow or Squarespace?

Yes. There's a ready-made React component and a Tailwind version on this page. On WordPress, Shopify, Webflow, Wix or Squarespace, paste the CSS into the site's custom code or custom CSS area, then add the class CCRoll to a button or block, and paste the JavaScript into the footer code area.

Is Text Roll free for commercial use?

Yes. It's free for personal and client projects, with no sign-up. Credit and a link back are appreciated but never required.