Marquee Text Button
A bold, boxy button whose label runs past like a news ticker, fading at both edges, and pauses when you hover. Two identical runs slide by half the track width, so the loop has no seam.
Also known as: scrolling text button css, ticker button css, infinite marquee button.
HTML
<button class="btn-marquee" type="button" aria-label="Shop now">
<span class="btn-marquee-window" aria-hidden="true">
<span class="btn-marquee-track">
<span class="btn-marquee-run">Shop now<i>✦</i>Shop now<i>✦</i></span>
<span class="btn-marquee-run">Shop now<i>✦</i>Shop now<i>✦</i></span>
</span>
</span>
</button>CSS
.btn-marquee {
--c: var(--btn-color, #3b82f6);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
padding: 0.75em 1.6em;
border: 0;
border-radius: 0.6em;
font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
--ink: color-mix(in srgb, var(--c) 45%, #000);
width: 12em;
padding: 0.8em 0;
border: 2px solid var(--ink);
border-radius: 0.35em;
background: var(--c);
color: #fff;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
box-shadow: 0.22em 0.22em 0 var(--ink);
transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;}
.btn-marquee-window {
display: flex;
overflow: hidden;
width: 100%;
-webkit-mask: linear-gradient(90deg, transparent, #000 1.2em, #000 calc(100% - 1.2em), transparent);
mask: linear-gradient(90deg, transparent, #000 1.2em, #000 calc(100% - 1.2em), transparent);
}
.btn-marquee-track {
display: flex;
flex: none;
animation: btn-marquee-scroll 6s linear infinite;
}
.btn-marquee-run {
display: flex;
flex: none;
align-items: center;
white-space: nowrap;
}
.btn-marquee-run i {
margin: 0 0.6em;
font-style: normal;
opacity: 0.75;
}
.btn-marquee:is(:hover, :focus-visible) .btn-marquee-track { animation-play-state: paused; }
.btn-marquee:active {
transform: translate(0.22em, 0.22em);
box-shadow: 0 0 0 var(--ink);
}
@keyframes btn-marquee-scroll {
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.btn-marquee, .btn-marquee *, .btn-marquee::before, .btn-marquee::after, .btn-marquee *::before, .btn-marquee *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--btn-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--btn-size. Every other dimension is inem, so the whole thing scales together. Currently previewing18px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.