35 Tailwind CSS button hover effects for SaaS and CTA buttons, gaming and web3 actions, editorial links, and e-commerce add-to-cart flows — spanning sliding colour wipes, liquid fills, border-draw and gradient-spin outlines, 3D press depths, glitch and holographic distortions, magnetic cursor motion, text flips, and particle bursts. Scoped under .tbh-NN for no-collision pasting, prefers-reduced-motion guarded, framework-agnostic.
Building a whole Tailwind app, not just this component?
You just browsed 36 Tailwind button hover effects. 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.
A premium CTA that feels physically alive: as the cursor enters, a soft ripple grows from the pointer position and the label nudges toward the cursor like it's magnetically attracted, with elastic easing that overshoots before settling. The port's win is structural — v4's discrete translate and scale properties mean the press no longer has to restate the magnetic pull.
A neon sci-fi CTA for gaming, web3 and dev-tool pages: a holographic grid sits behind the label and, on hover, tears with a hard stepped glitch while a magenta/cyan chromatic split flickers over the text. Four @keyframes stay CSS; every trigger, every layer and every reduced-motion fallback becomes a class.
The modern SaaS / Apple-style glass CTA: a translucent frosted pill that blurs the backdrop behind a hairline light rim, and on hover a diagonal shimmer beam sweeps across at 45 degrees like light on a wet lens. Tailwind ports this almost one-to-one — backdrop-blur-[16px] backdrop-saturate-[1.8] is the whole frost.
A playful CTA that starts as a soft organic blob and, on hover, resolves into a clean structured pill — great for creative studios and friendly product pages. The port's interesting constraint: an eight-value border-radius is not a design-scale value, so it stays an arbitrary property, and that is the right answer.
A crisp architectural outline CTA for editorial and agency sites: on hover two lines draw from opposite corners and meet to close a rectangular border around the label. The port is the cleanest kind — two pseudo-elements, four utilities each, and the staggered corner-meet is one delay-300.
A chunky game-UI button in isometric perspective with a thick extruded side, so it looks like a real key. On hover the tilt eases toward flat and the shadow stack collapses; on press it lands. This is the batch's best illustration of v4's discrete rotate property — three states, and not one of them restates the others.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
A kinetic editorial CTA that trades a static label for a continuously scrolling marquee on hover — the phrase repeats and slides endlessly across the pill. The port's real work is accessibility: the scrolling copies are aria-hidden decoration and the accessible name comes from aria-label, so what a screen reader hears never moves.
A dark premium CTA wrapped in a razor-thin conic-gradient border that spins continuously like a rotating light source — the AI/fintech 'live' look. This is the demo where the port is most honest about its limits: @property is what makes an angle animatable at all, and it has no utility form.
A refined understated CTA for editorial and luxury layouts: at rest it's just text, and on hover a hairline stroke draws itself continuously around the rounded-rectangle perimeter. Tailwind reaches SVG presentation attributes the same way it reaches anything else it has no scale for — arbitrary properties.
A soft tactile neumorphic CTA that appears extruded from the surface using paired light/dark shadows, depressing inward on press as the shadows invert. The port's contribution is legibility: four shadow stacks that used to live in four rules now sit next to each other, where you can actually see that they invert.
A loud neo-brutalist CTA: flat fill, thick solid border and a hard blur-free offset shadow. On hover it snaps onto its shadow and the shadow flips to saturated neon — a hard, instant snap, not a soft glow. The port makes the effect's one invariant visible: the snap distance and the shadow offset are the same number.
The dependable one: a solid colour wipes in and the label colour swaps to stay readable — the most requested hover in professional product UIs, in three directions. The port's whole subtlety is one utility: delay-[120ms] on the label's colour transition.
A tactile CTA where a wobbling organic blob swells from the centre to flood the button while its edges settle from a ripple into a clean fill — the centre-out liquid morph, distinct from entry 15's bottom-up wave. Two techniques from earlier entries (blob radius, scaled fill) combine here, and the port keeps both legible.
A snappy micro-interaction: on hover the label slides up and out while a second line or icon slides up to replace it, inside a clipped window — the 'Add to cart → Added ✓' pattern. The port's discipline is accessibility: the second row is aria-hidden, so the accessible name never changes under the user.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
A CTA that fills like a glass of water: on hover a coloured liquid rises from the bottom with a scalloped wave crest that sways — the bottom-up fill, distinct from entry 13's centre-out blob. The crest is a repeating radial-gradient, which is the trick worth stealing from this one.
A subtle high-craft CTA where the outlined frame drifts toward the cursor as it approaches, lagging behind with an elastic settle, and the label drifts a fraction less for parallax. Restrained, premium, and the clearest case in the collection for keeping JavaScript to a pair of normalised numbers.
A digital-distortion CTA: on hover the button splits into horizontal bands that jump out of alignment before snapping back — a sharp data-corruption glitch. Two attr(data-text) copies do all the work, and the real label underneath never moves.
A glowing CTA whose neon halo breathes: on hover a heavy blurred glow scales gently in and out on a loop, so the button looks like a live light source — the soft looping counterpart to entry 11's hard snap. The reduced-motion fallback here is the interesting part: a steady mid-glow, not an absence.
A theatrical CTA: on hover the surface splits into halves that slide apart, revealing a contrasting label behind — an outward curtain. Both front halves are one data-front attribute clipped twice, so the front copy can never disagree with itself.
A dynamic CTA where a skewed colour panel sweeps across on hover like a diagonal shutter closing over the surface, with the label swapping colour as it passes. In v4 the skew and the sweep are separate properties, so the blade's angle is stated once instead of in every state.
A bouncy, delightful CTA that springs up on hover — it lifts, squashes slightly and overshoots before settling. The squash is the part most implementations skip, and in v4 it is one utility (hover:scale-x-[1.04] hover:scale-y-[.96]) that no longer has to repeat the lift.
The minimal one: a crisp underline grows outward from the centre to full width on hover — the cleanest affordance for nav links and inline CTAs, in three treatments. Design B contains the trick worth stealing: swapping transform-origin between states turns a grow into a directional swipe.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
A CTA that flips like a physical card: on hover it rotates 180° in 3D to reveal a styled back face with a different label and colour. Three properties have to be exactly right — perspective, transform-style and backface-visibility — and the port puts all three where you can see them.
A celebratory CTA that scatters particles outward on hover — confetti-style points fly out and fade. Every particle is a box-shadow clone of one 6px dot, which means eight particles cost one element and zero extra DOM.
A CTA where two coloured panels slide in from the left and right to meet in the exact centre on hover — like closing doors — restyling the surface as they seal. The inward counterpart to entry 19's outward split, and the pair is worth reading together.
A retro-terminal CTA where, on hover, the label retypes character by character with a blinking caret — nostalgic and techy for dev tools and docs. The ch unit and the steps() count are the whole effect, and both are now visible in the markup where the character count lives.
A graphic flat-design CTA with a solid blur-free offset shadow. On hover it slides onto its shadow and flattens against the page as if pressed — monochrome and graphic, distinct from entry 11's neon snap. Design B runs the same mechanic in reverse, lifting off the page instead.
A Material-style ripple: on hover a circular wave expands from the centre and fades as it grows, like a drop hitting water. No pointer tracking, so unlike entry 01 this one needs no JavaScript at all — and design B turns the same two properties into a repeating sonar echo.
A vivid CTA framed by a rotating full-spectrum gradient border with a soft blurred glow bleeding behind it — the 'AI / Pro' badge look. Unlike entry 08 it rotates the LAYER rather than a registered angle, so it needs no @property and works further back.
Three silhouette morphs: sharp corners rounding into a pill, a pill snapping to an asymmetric notch, and a circular icon button expanding into a labelled bar. The third is the one worth copying — a floating action button that earns its label on hover.
A directional CTA where the label nudges aside and an arrow slides in from outside the edge on hover — a purposeful 'forward' cue for Next and Continue actions. The icon animates width from 0, which is the one honest way to make it claim space without the label jumping.
A sophisticated dark CTA with a soft circle of light that follows the cursor across its surface — the button appears lit by a moving spotlight. Design B applies the same tracked gradient to the BORDER via a mask-composite ring, which is the part worth stealing.
A rhythmic CTA where several bars rise one after another on hover — an equaliser sweeping across the button. The stagger used to need four :nth-child rules; here each bar carries its own delay-*, which is both shorter and impossible to misread.
A warm radiant CTA where a glow blooms from the centre on hover, flooding the button like a sunrise — an opaque flood, distinct from entry 28's fading ring. Design B swaps the bloom for repeating-conic-gradient rays that scale AND rotate into place.
A deeply tactile CTA on a thick 3D base like a plunger key: on press it drives straight down while the base compresses in lockstep — a vertical plunge, distinct from entry 06's isometric tilt. The invariant is arithmetic, and the port puts all three stages where you can check it.
A Liquid Glass 'Add to Cart' CTA that ripples like a disturbed pool on click — a real SVG displacement map radiates from the pointer and warps the frosted surface, then decays. Includes a success morph, an aria-live status and a High-Performance toggle that swaps the GPU-heavy warp for a pure-CSS ripple.
FAQ
Frequently asked questions
How do these button hover effects actually work in Tailwind — do I need custom CSS?
Most effects here layer a pseudo-element behind the label. Mark the button as a positioning context with relative overflow-hidden, drop a before:absolute before:inset-0 layer holding the fill or glow, then animate it on hover:. The label sits above with its own layer at relative z-10. The sliding wipe (demo 12) starts the layer at before:-translate-x-full and moves it to hover:before:translate-x-0 with before:transition-transform. For effects that respond to a parent state — like the icon slide-in (demo 31) — wrap the label and icon in a group and drive children with group-hover:. Keep every animated layer inside the clipped box so nothing bleeds past the rounded corners, and you'll only need extra CSS for the timed loops.
Why does my sliding fill cover the text, or leak past the rounded corners?
If the label disappears or the fill paints over the text, it's stacking order. A before: or after: layer with absolute inset-0 sits above static content by default, so wrap the text in a span with relative z-10 to lift it. The second classic bug is a wipe or curtain (demos 12, 19, 25) leaking past the corners — that happens when overflow-hidden is missing on the root, so add it there. Third, a wipe that jumps instead of gliding means the transition is on the wrong property: put transition-transform — nottransition-all — on the moving layer and animate translate, which the compositor runs without repainting each frame. transition-all also animates layout properties you never intended, which is where the stutter comes from.
Which of these need JavaScript, and how do the cursor-following ones work?
Anything that tracks the pointer can't be done with utilities alone. The magnetic ripple (demo 01), magnetic border drift (demo 16) and cursor spotlight (demo 32) need a small handler: on mousemove read the pointer position relative to the element — subtract getBoundingClientRect() from clientX and clientY — then write those numbers into CSS custom properties, for example el.style.setProperty('--x', x + 'px'). The spotlight consumes them in an arbitrary radial-gradient value; the magnetic button feeds them into a translate. Reset the properties on mouseleave so it eases back to centre. Everything else — the ripple growth, the glow bloom — stays pure CSS, so the script is only about ten lines shuttling two numbers into the styles.
How do I make these accessible for reduced-motion and keyboard users?
Two things. First, motion: continuous loops like the neon pulse (demo 18), conic border spin (demo 08) and marquee (demo 07) run regardless of hover, so gate them behind motion-safe: — apply the animation only when motion is allowed, and the button falls back to a calm static state for anyone with reduced-motion set. Second, focus: hover is invisible to keyboard users, so pair every hover: with a matching focus-visible: variant and never strip the outline without replacing it. Because these are real <button> elements, Tab reaches them and Enter or Space fires them for free — don't rebuild that on a <div>. Watch contrast on the hovered state too: a wipe that flips the label to white needs the incoming background to still pass against white text.
When should I avoid using a hover effect on a button?
Hover is a pointer affordance, so on touch screens there is no hover state — the effect either never fires or sticks after a tap until you touch elsewhere. For a primary mobile CTA, don't hide meaning behind hover: the icon slide-in (demo 31) and text flip (demo 14) must read at rest, and the marquee (demo 07) or typewriter (demo 26) should never conceal the label until hovered. Reserve the loud ones — glitch slice (demo 17), particle burst (demo 24), 3D flip (demo 23) — for desktop, decorative, low-frequency actions, not a form's submit button where flash and motion distract from the task. A good rule is one showpiece button per view; a page of competing hover animations feels cheap and pulls the eye everywhere at once. Test with a real finger, not just a trackpad.
How do I add the custom keyframe animations some of these buttons use?
Effects with their own timeline — the glitch slice (demo 17), sliding marquee (demo 07), conic border spin (demo 08) and typewriter caret (demo 26) — need keyframes Tailwind doesn't ship by default. Two routes. Register them in tailwind.config under theme.extend.keyframes plus a matching animation entry, then use the generated class like animate-spin-slow. Or, for a one-off, inline it as an arbitrary value: animate-[glitch_0.3s_steps(2)_infinite] and define the @keyframes glitch in a global stylesheet. The config route wins when several buttons share a timeline; the arbitrary route keeps a single demo self-contained. Either way the keyframe names must match exactly, and remember arbitrary values use underscores where CSS wants spaces.
My spinning gradient border doesn't show — what's wrong with the conic border buttons?
A spinning gradient border (demos 08 and 29) isn't a real border — borders can't hold a rotating conic gradient. The pattern is a two-layer sandwich: the outer element takes the gradient as its background plus a little padding like p-[2px], and an inner element with the solid button colour and rounded sits on top, so the padding gap reveals the gradient as a faux border. To spin it, animate the gradient's angle — cleanest with an @property-registered angle custom property so a conic gradient can actually transition — or rotate an oversized gradient layer behind a clipped box. If nothing appears, you're usually missing the padding, so there's no gap to expose the border, or the inner layer is transparent and the whole gradient shows straight through.
Should each of these be a button or a link, and how do I drop one into my project?
Pick the element by behaviour, not looks: an action on the current page — submit, open, toggle — is a <button> with a type of button; navigation to another URL is an <a>. Both accept the same utility classes, so the effect is identical either way — the centre underline draw (demo 22) suits links, while the plunger press (demo 35) and elastic lift (demo 21) read as actions. To copy one in, paste the markup, keep the wrapper's relative overflow-hidden and any group, and make sure your Tailwind build scans that file so the classes aren't purged from the output. If a demo relies on an arbitrary keyframe or a custom property, carry its @keyframes or config entry across as well, or the animation silently does nothing.
