51 Tailwind CSS buttons for form submits and gradient CTAs, add-to-cart and download actions, loading and confirm-delete states, segmented button groups, and icon toolbars — from soft-pill SaaS primaries and neon plasma bursts to skeuomorphic clay, brushed brass, walnut, velvet, boarding-pass, and punch-card surfaces. Scoped under .tb-NN for no-collision pasting, prefers-reduced-motion guarded, framework-agnostic.
Building a whole Tailwind app, not just this component?
You just browsed 51 Tailwind buttons. Untitled UI Pro unlocks 5,000+ components and sections and 250+ page examples for React, styled with Tailwind CSS v4. One licence is a one-time $349 with lifetime updates; teams start at $999.
The button every form ends with, ported: a two-layer elevation shadow that reads as physical depth, a masked sheen that sweeps once on hover, a real 1px press travel, and a focus ring that survives on any background. The port's win is that all four states now sit in one class list — hover:, active:, focus-visible: and disabled: read in the order a user meets them.
One shared recipe, two visual weights, and a container that stacks them when the slot is narrow — not when the viewport is. The port is the honest test of "utilities can't do variants": they can, and the shared part stays literally identical because both buttons carry the same twenty classes and differ in four.
A ghost button that keeps its 1px silhouette at rest and fills from the bottom edge on hover, the label inverting in the same beat. The fill is one background-size transition on a fixed gradient — no pseudo-element, no overflow clipping — and the border is currentColor, so one colour utility re-skins the whole control.
A four-button icon toolbar where each control carries a real accessible name, a 44px touch target inside a 40px visual square, and a tooltip that appears on hover and keyboard focus. has-hover: and has-focus-visible: on the wrapper are the port's headline: the relational CSS selector becomes two variants sitting on the element that owns the tooltip.
A conversion-grade CTA with a conic gradient ring that rotates continuously, a soft bloom underneath, and a mesh body that shifts on hover. The rotation needs @property to register the angle as an <angle>, which is the clearest case in the collection for keeping machinery in the stylesheet and exposing only the result as animate-tb05-spin.
Idle → pending → success in a button that never changes width, because all three labels share one grid cell. The port's headline is group-data-[state=busy]:: the CSS version needed three descendant selectors keyed off [data-state], and Tailwind states each slot's own visibility condition on the slot itself.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
Every button state side by side — rest, hover, focus, pressed, truly disabled, and aria-disabled (focusable, explains itself, refuses activation). The frozen cards use data-force attributes rather than .is-* classes, which is the tidiest thing the port does: demo-only styling is visibly demo-only.
A segmented control on real radio inputs, so arrow-key navigation, roving focus and form serialisation come from the platform. The sliding thumb tracks the checked segment, and the port makes the label's own inversion a has-checked: variant — the state is read where it is rendered, not from four rules at the bottom of a stylesheet.
The most-measured button in e-commerce: press it and a cart glyph arcs into a badge, the digit bumps, and the label swaps to "Added" before returning to idle — with the real count announced politely, so screen-reader users hear the outcome instead of watching it.
A download button that becomes its own progress bar: the fill sweeps behind the label, a conic ring mirrors it on the icon, and the percentage is a registered custom property so the digits interpolate instead of stepping. One variable drives three visuals — which is exactly the case where Tailwind's job is to expose the variable, not to own it.
A like button with a springy heart pop, eight radial sparks and a count that rolls over — no JavaScript. State lives in a checkbox, and has-checked: turns every downstream reaction into a variant on the element that reacts.
A destructive action that asks once, inline, without a modal: the row expands to reveal "Sure? / Yes, delete" with the confirm deliberately placed second and never under the original cursor. The 0fr → 1fr grid-track animation ports to two utilities, which is the cleanest possible expression of it.
One shape that morphs between a play triangle and two pause bars — no icon swap, no SVG. Both states are clip-path: polygon() with matching point counts, and Tailwind carries them as arbitrary utilities, which puts the play polygon and the pause polygon on the same line of markup for the first time.
Subscribe once and eighteen paper shards fan out on individual trajectories, the bell rings, and the label flips to "Subscribed". Every particle's angle, distance, spin and delay is a custom property in its style attribute — the one place where inline style beats a utility, and the port says so.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
The button leans toward your cursor like it is magnetised, a mercury highlight tracks the pointer across its surface, and clicks ripple from the exact point of contact. The JS writes four custom properties; every visual is a utility that reads them — the cleanest division of labour in the collection.
Neo-brutalist slab with a hard offset shadow that snaps flat when pressed, and a hover glitch built from two duplicate labels sliced by clip-path and pushed apart in cyan and magenta. Steps-based timing keeps it digital — no easing, no blur, no JavaScript.
A neon tube that idles at low current, floods with plasma on hover, and fires an expanding shock ring on press. The glow is layered text-shadow and box-shadow rather than a blur filter, so it stays crisp at any zoom — and both stacks are single arbitrary utilities, because a glow is one recipe, not six values.
Fat, matte, extruded clay: two inner shadows carve the highlight and the shade, an outer shadow grounds it, and pressing squashes the shape on both axes so it deforms like real material. The shadows swap direction on press — the whole demo is one shadow-[…] and its active: twin.
Letterpress restraint: a serif label on cream stock, a hairline rule that grows into a full underline, and an ink blot that floods from the baseline with a soft irregular edge. The feathered mask is the whole effect and stays one arbitrary value — feathering is a recipe, not a design token.
Every press shatters a ring of glass shards outward, each with its own angle, distance, spin and lifetime — spawned as real elements, animated by one keyframe, and removed on animationend so the DOM never grows. The shard's look is a class list the JS applies; its trajectory is inline data.
A machined brass nameplate: horizontal brush grain from stacked repeating gradients, four countersunk screws, engraved letterforms cut with a two-shadow bevel, and a specular band that sweeps across the metal on hover. The grain is the collection's first clear case for keeping paint in CSS.
Handmade washi stock with fibrous speckle, a deckled bottom edge cut by a mask, and a folded paper crane whose wing lifts on hover. The button tilts on its long axis like a sheet being picked up — and the two-layer mask that tears the edge is the part that stays CSS.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
Real frosted glass over a photograph: backdrop-blur and backdrop-saturate handle the refraction, a bright inner rim catches the light on two edges only, frost collects in the corners, and pressing sends a hairline crack across the face.
A 1930s typewriter keycap on its chrome stem: a concave dished face, a nickel collar, and 5px of mechanical travel that collapses the stem's stacked shadows on press, so the key genuinely descends rather than sliding.
Book-matched walnut under high-gloss lacquer: grain from four repeating gradients at incommensurate frequencies so it never visibly tiles, a brass inlay label cut with background-clip:text, and a gloss band that travels across the finish on hover.
A two-tone gelatin capsule with a wet specular streak, a visible seam where the halves overlap, and a dose of liquid that rises through the shell on hover. Press it and the capsule compresses along its long axis like soft gelatin.
A struck copper coin with a milled edge, verdigris patina blooming in the low spots, and a real 3D flip to its reverse face. v4 ships transform-3d, backface-hidden, perspective-* and rotate-y-* as utilities, so the entire flip construction ports — which it could not have done in v3.
Press the cookie and it cracks: two clipped halves rotate apart, a paper slip slides out, and a fortune is written into a real aria-live region — so the message is announced, not merely displayed. The animation is garnish on a working disclosure.
A die-cut vinyl sticker whose holographic laminate shifts with the pointer: the rainbow sweep, the specular conic and a 3D tilt all read from pointer variables, and the corner peels up as you approach. The effect collectors call "cracked ice".
Board-formed concrete: shutter lines from the timber mould, aggregate speckle through the mix, chipped corners cut by clip-path, and a press that drops the slab into its own shadow with a puff of dust at the base.
A bead of mercury detaches from the button, stretches, and is reabsorbed on hover — genuine metaball merging from an SVG goo filter applied to plain CSS shapes. The filter is markup, the geometry is utilities, and the label sits outside the filtered layer so it stays sharp.
The button a 2027 SaaS product ships: a soft pill with a true 1px gradient stroke drawn by mask-composite, an inner top-light, a spring lift, a shortcut chip that dims as the arrow slides, and a focus ring that respects the radius exactly.
A strip of drafting tape stuck slightly crooked: translucent so the surface shows through, fibrous weave running lengthwise, ragged torn ends cut by a repeating mask, and a hand-written label. Hover presses the tape flatter; pressing sticks it down.
A shard of volcanic glass: an asymmetric faceted silhouette from clip-path, near-black translucency over a blurred backdrop, two facet planes shaded by opposing gradients, and a razor of light that runs along the leading edge on hover.
Crushed burgundy velvet cut as an awards ribbon: notched swallow-tail ends, a nap sheen that reverses direction as the pointer crosses — the way velvet changes tone when you brush it — and gold-foil lettering with a proper bevel.
A machined instrument panel with a real seven-segment readout: every digit is seven CSS bars lit from a lookup table, glowing with a layered bloom against a smoked lens. Press it and the counter ticks up with correct segment-by-segment switching.
A Type-II cassette with a hand-written label: both reels turn while you hover, and clicking flips the shell to side B. The reels are conic gradients, the spool teeth a repeating conic, and the flip the same transform-3d construction as the coin.
Slate with real chalk behaviour: a dusty uneven board, a hand-drawn double border, letterforms that sit in the tooth of the surface, and a puff of chalk dust when you press. Hover wipes a faint smudge across the board.
A record slides half out of its sleeve on hover and starts turning; press it and concentric ripples run out through the grooves like a needle drop. Grooves and label are pure gradients, and the sleeve carries real cover art with a flat fallback.
An instant photo mid-development: the image starts dark, flat and green-shifted, then blooms to full colour as you hover — a pure filter transition, exactly how the chemistry behaves. The frame tilts, lifts off the table, and the caption is hand-written on the wide bottom border.
A boarding pass with a genuinely perforated seam: a mask punches half-circles down the divide, the stub tears away and rotates on hover, and a barcode is drawn with one repeating gradient. Flight numbers use tabular-nums so nothing shifts as they change.
A 1953 transit token: milled rim, tarnished brass, and a knocked-out letter you can see the background through — a mask-composite cut, not a coloured glyph. Press it and the token drops into the slot and springs back.
An apothecary label on aged amber stock: typewriter setting with a red rule, a serrated tear edge along the top, and a rubber "REFILL" stamp that thuds in at an angle on hover — off-register and unevenly inked, the way a real stamp lands.
A bakelite rotary switch that turns 132° from OFF to ON, with a knurled grip, a chamfered pointer, engraved ticks around the bezel, and a warm indicator lamp that fades up as the contact closes. A checkbox with role="switch" holds the state.
A commemorative stamp with true perforations on all four edges, an engraved portrait in sepia, a denomination cartouche, and a postmark that lands across the corner on hover — concentric rings plus a wavy cancellation bar, rotated and off-centre.
A cigar band in embossed gold foil: scalloped top and bottom edges, a guilloché lattice engraved into the field, a laurel medallion struck in the centre, and small-caps lettering raised with a two-tone bevel. Hover tilts the foil so the light runs the other way.
A 1974 desk calculator key: warm beige ABS with a dished top, a chamfered skirt, tight 3px travel, and the orange function key beside it. The dish is two counter-facing radial gradients, and the press collapses a hard shadow stack so it lands with a stop.
A steel toolbox latch under a work lamp: a spotlight tracks your pointer across the brushed plate, and clicking throws the latch — the hasp swings up over the keeper and the button reports its state through aria-pressed, not just its look.
A thermal receipt whose total counts up from zero when you press it — the number is animated by CSS, using a registered integer fed into counter-reset and printed through content. Zigzag torn edge, faded thermal ink, monospaced columns.
An 80-column punch card that tilts toward your cursor in real 3D and drifts a few pixels with it: rows of rectangular holes cut by a mask grid, a clipped corner, faded index printing, and a sheen that tracks the light across the card stock.
A brass periscope objective: a knurled bezel, an engraved focus scale, and a six-blade iris that opens on hover to reveal the glass — each blade a clipped triangle rotating about the optical centre, with a reflection sweep across the coated lens.
FAQ
Frequently asked questions
How does the loading button keep the same width across idle, pending and success states?
The button in demo 06 stacks all three labels — idle text, spinner, success check — into one CSS grid cell using grid-template-areas with every child assigned to the same area. The button's width is therefore fixed by the widest label and never reflows when the state changes. Transitions only touch opacity and visibility, which the compositor handles without a layout pass, so there is no jitter. Drive the state from a single data-state attribute on the button and let attribute selectors reveal the right cell. The common bug is swapping labels with display:none / display:block instead — that collapses the grid cell, so the box snaps narrow on pending and wide again on done. Keep every layer rendered and only fade between them.
How do the confetti and particle-burst buttons animate without any JavaScript?
Demos 14, 20 and 11 pre-render every shard, spark or confetti piece as its own element inside the button, each positioned absolutely and given individual keyframes through inline custom properties like --angle, --dist and --spin. A single keyframe reads those properties in a translate()/rotate() chain, so one shared animation produces dozens of unique trajectories. The burst is triggered by :active (or :focus for keyboard), and the pieces sit in an absolutely-positioned overlay with inset:0 and pointer-events:none so they never change the button's box or intercept clicks. The catch: a pure :active burst only plays while the mouse is held. If you want a fire-and-settle effect on real clicks you either accept the held-state limitation or add a tiny class-toggle in JS — the CSS still does all the motion.
How do I make an icon-only button accessible when there is no visible text label?
The toolbar in demo 04 gives every control a real accessible name with aria-label, so a screen reader announces "Bold", "Italic" and so on even though the face shows only a glyph. The decorative SVG inside each button carries aria-hidden="true" so it is not announced twice. The visible tooltip is purely sighted affordance — it is a separate element revealed on :hover and :focus-visible, never the accessible name, because tooltip text can be clipped or delayed and assistive tech should not depend on it. Each button is a genuine <button type="button"> with a 44px touch target hit area even though the painted size is 40px, satisfying the pointer-target minimum. Don't put the label only in a title attribute: title is inconsistently announced and invisible to touch users.
How does the play/pause button morph between the two icons without swapping SVGs?
Demo 13 uses one element whose shape is defined by clip-path, and the play triangle and the two pause bars are two states of the same polygon. Toggling an aria-pressed attribute (or a checkbox's :checked) switches to a second clip-path value with the same number of points, and because both paths have matching point counts the browser can tween between them. There is no icon library, no image swap and no layout change — only the clip geometry animates. The subtlety is that clip-path interpolation requires identical vertex counts on both keyframes; if one shape has five points and the other has four, the transition snaps instead of morphing. Author both states as the same polygon topology and move the vertices, and expose the current state with aria-pressed so the control is announced as a toggle, not a plain button.
The rotating gradient ring on my CTA button won't animate — why is it stuck?
The conic ring in demo 05 rotates by animating a custom property that holds an angle, and a plain CSS variable cannot be tweened — the browser treats it as a discrete string and jumps straight to the end value, so the ring looks frozen or teleports. The fix is to register the property with @property and declare syntax: '<angle>' plus an initial value; only then does the engine know how to interpolate it, and the conic gradient sweeps smoothly. Also make sure the animated angle feeds the gradient's from position and that the element actually has a size — a zero-height pseudo-element paints nothing. Because this runs continuously it must be wrapped in a @media (prefers-reduced-motion: reduce) block that sets animation: none, otherwise you ship a perpetually spinning element to users who asked the system to stop motion.
How does the segmented button group work on real radio inputs instead of custom state?
Demo 08 builds the segmented control from a group of visually-hidden <input type="radio"> elements sharing one name, each paired with a <label> that is the visible segment. This buys you three behaviours for free: arrow-key navigation and roving focus within the group, a single serialisable value when the control sits in a <form>, and the selected pill styled purely with the :checked sibling selector. Don't hide the inputs with display:none — that removes them from the tab order and kills keyboard support; use a clip/opacity technique that keeps them focusable, and add a :focus-visible ring on the adjacent label so keyboard users can see where they are. Because the state lives in the radios, the group works with no JavaScript and submits like any other field.
What is the difference between the disabled and aria-disabled states in the state-reference button?
Demo 07 shows both because they are not interchangeable. A truly disabled button is removed from the tab order, fires no click or focus events, and cannot be the target of a form submit — the browser enforces all of that. An aria-disabled="true" button still receives focus and still fires events; it only announces as unavailable, and you must block the action in your handler yourself. Use real disabled for a control that is genuinely inert. Reach for aria-disabled when you want the button to stay focusable so a keyboard user can land on it and hear why it can't be used — for example a submit button that is greyed until a form validates, where a fully disabled button would be silently skipped and leave the user confused about what is blocking them. Style both with the same dimmed treatment so they read identically.
When should I not use the heavier tactile buttons like the frosted glass, 3D coin flip or magnetic follow ones?
The material demos — frosted ice (23) with backdrop-blur, the copper coin (27) and punch card (50) with 3D transform, the magnetic mercury (15) tracking the pointer — are showpieces, not defaults. Skip them for high-frequency, high-stakes controls: a checkout's primary submit or an add-to-cart should be instantly legible, and backdrop-blur is one of the more expensive paints on mobile, so a grid of frosted buttons can drop frames. The pointer-following and mercury effects rely on hover and fine pointer movement, so they degrade on touch — always ship a clean fallback state. And every continuously-animated variant (the conic ring, neon idle, spinning reels) must honour prefers-reduced-motion. For dense forms and toolbars prefer the plain primary, ghost or soft-pill buttons (demos 01–03, 32); save the tactile pieces for hero moments where one button carries the page.
