36 Tailwind CSS Button Hover Effects
34 / 36

All 36 in 36 Tailwind CSS Button Hover Effects

  1. 01Tailwind Magnetic Ripple Attraction Button Hover Effect
  2. 02Tailwind Cyberpunk Holographic Glitch Grid Button
  3. 03Tailwind Frosted Glassmorphism Shimmer Glow Button
  4. 04Tailwind Organic Blob Morph Button Hover Effect
  5. 05Tailwind Dual-Line Intersection Border Draw Button
  6. 06Tailwind Isometric Tactile 3D Depress Button
  7. 07Tailwind Infinite Sliding Kinetic Marquee Button
  8. 08Tailwind Chroma Conic Gradient Border Spin Button
  9. 09Tailwind Minimalist Border & Outline Drawing Hover Effects
  10. 10Tailwind Modern 3D Skeuomorphic Button Press Effects
  11. 11Tailwind Neo-Brutalist & Cyberpunk Button Glow Effects
  12. 12Tailwind Sliding Background Color Wipe Button Effects
  13. 13Tailwind Liquid Fill & Organic Morphing Button Effects
  14. 14Tailwind Kinetic Text Flip & Icon Reveal Button Effects
  15. 15Tailwind Liquid Wave Fill Button Hover Effect
  16. 16Tailwind Magnetic Border Drift Button
  17. 17Tailwind Glitch Slice Button Hover Effect
  18. 18Tailwind Neon Pulse Glow Button Hover Effect
  19. 19Tailwind Split Reveal Curtain Button Effect
  20. 20Tailwind Diagonal Shutter Sweep Button Effect
  21. 21Tailwind Elastic Lift Spring Button Hover Effect
  22. 22Tailwind Center Underline Draw Link Button Effects
  23. 23Tailwind 3D Flip Card Button Hover Effect
  24. 24Tailwind Particle Burst Confetti Button Effect
  25. 25Tailwind Slide Doors Closing Panel Button Effect
  26. 26Tailwind Typewriter Retype Terminal Button Effect
  27. 27Tailwind Hard Shadow Shift Flat Button Effect
  28. 28Tailwind Material Ripple Wave Button Effect
  29. 29Tailwind Rainbow Gradient Border Spin Button
  30. 30Tailwind Morph Shape Silhouette Button Effects
  31. 31Tailwind Icon Slide In Directional Button Effect
  32. 32Tailwind Cursor Spotlight Glow Button
  33. 33Tailwind Stagger Fill Equaliser Button Effect
  34. 34Tailwind Sunburst Expand Radiant Button Effect
  35. 35Tailwind 3D Press Plunger Key Button Effect
  36. 36Tailwind Add-to-Cart Liquid Glass Ripple Button
Pure TailwindMIT licensed

Tailwind Sunburst Expand Radiant Button Effect

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.

Live Demo
Plain CSSTailwind v4
Try it

Untitled UI Pro: 5,000+ React + Tailwind CSS v4 components · from $349 one-time

Untitled UI React · Affiliate link

Get Untitled UI Pro

The code

<div class="tbh-34-group w-full min-h-svh flex flex-wrap">
<section class="tbh-34a flex-[1_1_340px] min-w-[300px] grid place-items-center px-6 py-14 font-tbh34-sans bg-tbh34a-stage" aria-label="Sunburst expand button">
  <button type="button" class="group/btn relative isolate overflow-hidden cursor-pointer rounded-full border border-[color-mix(in_oklab,var(--color-tbh34a-warm)_60%,transparent)] px-11 py-[17px] text-base font-extrabold text-white bg-[color-mix(in_oklab,var(--color-tbh34a-warm)_22%,var(--color-tbh34a-stage))] focus-visible:outline-3 focus-visible:outline-tbh34a-warm focus-visible:outline-offset-4 before:content-[''] before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:z-0 before:scale-0 before:bg-[radial-gradient(circle,var(--color-tbh34a-warm)_0%,color-mix(in_oklab,var(--color-tbh34a-warm)_70%,transparent)_45%,transparent_70%)] before:transition-[scale] before:duration-500 before:ease-[cubic-bezier(.2,.9,.2,1)] hover:before:scale-[2.4] focus-visible:before:scale-[2.4] motion-reduce:before:transition-none">
    <span class="relative z-[1] transition-[text-shadow] duration-300 group-hover/btn:[text-shadow:0_0_12px_oklch(0.95_0.04_85/0.8)] group-focus-visible/btn:[text-shadow:0_0_12px_oklch(0.95_0.04_85/0.8)]">Start today</span>
  </button>
</section>
<section class="tbh-34b flex-[1_1_340px] min-w-[300px] grid place-items-center px-6 py-14 font-tbh34-sans bg-tbh34b-stage" aria-label="Radial rays button">
  <button type="button" class="group/btn relative isolate overflow-hidden cursor-pointer border-0 rounded-full px-[46px] py-[17px] text-base font-extrabold text-tbh34b-ink bg-tbh34b-warm focus-visible:outline-3 focus-visible:outline-tbh34b-ink focus-visible:outline-offset-4">
    <span aria-hidden="true" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[200%] aspect-square z-0 scale-0 opacity-0 bg-[repeating-conic-gradient(from_0deg,oklch(1_0_0/0.5)_0deg_6deg,transparent_6deg_18deg)] transition-[scale,rotate,opacity] duration-600 ease-[cubic-bezier(.2,.9,.2,1)] group-hover/btn:scale-100 group-hover/btn:[rotate:30deg] group-hover/btn:opacity-60 group-focus-visible/btn:scale-100 group-focus-visible/btn:[rotate:30deg] group-focus-visible/btn:opacity-60 motion-reduce:transition-opacity motion-reduce:group-hover/btn:scale-100 motion-reduce:group-hover/btn:[rotate:0deg] motion-reduce:group-hover/btn:opacity-40"></span>
    <span class="relative z-[1]">Shine</span>
  </button>
</section>
</div>
@import "tailwindcss";

@theme {
  --color-tbh34a-warm: #e8a94a;
  --color-tbh34a-warm: oklch(0.78 0.16 65);
  --color-tbh34a-stage: #1a1206;
  --color-tbh34a-stage: oklch(0.2 0.04 70);
  --color-tbh34b-warm: #e8c04a;
  --color-tbh34b-warm: oklch(0.82 0.16 85);
  --color-tbh34b-ink: #1a1206;
  --color-tbh34b-ink: oklch(0.22 0.04 85);
  --color-tbh34b-stage: #171205;
  --color-tbh34b-stage: oklch(0.18 0.03 85);
  --font-tbh34-sans: 'Space Grotesk', system-ui, sans-serif;
}
/* Nothing stays CSS: two gradients, a scale, a rotation and a text-shadow. */

.tbh-34-group {
  width: 100%;
  min-height: 100svh;
}

.tbh-34a,
.tbh-34b {
  min-height: 100svh;
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-tbh34a-warm: #e8a94a;
  --color-tbh34a-warm: oklch(0.78 0.16 65);
  --color-tbh34a-stage: #1a1206;
  --color-tbh34a-stage: oklch(0.2 0.04 70);
  --color-tbh34b-warm: #e8c04a;
  --color-tbh34b-warm: oklch(0.82 0.16 85);
  --color-tbh34b-ink: #1a1206;
  --color-tbh34b-ink: oklch(0.22 0.04 85);
  --color-tbh34b-stage: #171205;
  --color-tbh34b-stage: oklch(0.18 0.03 85);
  --font-tbh34-sans: 'Space Grotesk', system-ui, sans-serif;
}
/* Nothing stays CSS: two gradients, a scale, a rotation and a text-shadow. */

.tbh-34-group {
  width: 100%;
  min-height: 100svh;
}

.tbh-34a,
.tbh-34b {
  min-height: 100svh;
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • Design B is the batch's last and clearest demonstration of the discrete-transform win: translate(-50%,-50%) scale(1) rotate(30deg) — five values with the centring repeated in every state — becomes a permanent centring pair plus scale-100 and [rotate:30deg] on hover.
  • The label's text-shadow bloom is a one-utility addition with an outsized effect, and it is only obvious to add because the label's hover state is written next to the layer's.
  • UI change from the CSS original: both blooms fire on group-focus-visible/btn:, design B's rays now fade in as well as grow (the original jumped to 0.6 opacity), and reduced motion keeps the rays present and unrotated at 40%.
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind Sunburst Expand Radiant Button Effect
Source: https://codefronts.com/motion/tailwind-css-button-hover-effects/tailwind-sunburst-expand-radiant-button-effect/

A warm radiant CTA where a glow blooms from the centre on hover, flooding the button like a sunrise &mdash; 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.
## HTML
```html
<div class="tbh-34-group w-full min-h-svh flex flex-wrap">
<section class="tbh-34a flex-[1_1_340px] min-w-[300px] grid place-items-center px-6 py-14 font-tbh34-sans bg-tbh34a-stage" aria-label="Sunburst expand button">
  <button type="button" class="group/btn relative isolate overflow-hidden cursor-pointer rounded-full border border-[color-mix(in_oklab,var(--color-tbh34a-warm)_60%,transparent)] px-11 py-[17px] text-base font-extrabold text-white bg-[color-mix(in_oklab,var(--color-tbh34a-warm)_22%,var(--color-tbh34a-stage))] focus-visible:outline-3 focus-visible:outline-tbh34a-warm focus-visible:outline-offset-4 before:content-[''] before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:z-0 before:scale-0 before:bg-[radial-gradient(circle,var(--color-tbh34a-warm)_0%,color-mix(in_oklab,var(--color-tbh34a-warm)_70%,transparent)_45%,transparent_70%)] before:transition-[scale] before:duration-500 before:ease-[cubic-bezier(.2,.9,.2,1)] hover:before:scale-[2.4] focus-visible:before:scale-[2.4] motion-reduce:before:transition-none">
    <span class="relative z-[1] transition-[text-shadow] duration-300 group-hover/btn:[text-shadow:0_0_12px_oklch(0.95_0.04_85/0.8)] group-focus-visible/btn:[text-shadow:0_0_12px_oklch(0.95_0.04_85/0.8)]">Start today</span>
  </button>
</section>
<section class="tbh-34b flex-[1_1_340px] min-w-[300px] grid place-items-center px-6 py-14 font-tbh34-sans bg-tbh34b-stage" aria-label="Radial rays button">
  <button type="button" class="group/btn relative isolate overflow-hidden cursor-pointer border-0 rounded-full px-[46px] py-[17px] text-base font-extrabold text-tbh34b-ink bg-tbh34b-warm focus-visible:outline-3 focus-visible:outline-tbh34b-ink focus-visible:outline-offset-4">
    <span aria-hidden="true" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[200%] aspect-square z-0 scale-0 opacity-0 bg-[repeating-conic-gradient(from_0deg,oklch(1_0_0/0.5)_0deg_6deg,transparent_6deg_18deg)] transition-[scale,rotate,opacity] duration-600 ease-[cubic-bezier(.2,.9,.2,1)] group-hover/btn:scale-100 group-hover/btn:[rotate:30deg] group-hover/btn:opacity-60 group-focus-visible/btn:scale-100 group-focus-visible/btn:[rotate:30deg] group-focus-visible/btn:opacity-60 motion-reduce:transition-opacity motion-reduce:group-hover/btn:scale-100 motion-reduce:group-hover/btn:[rotate:0deg] motion-reduce:group-hover/btn:opacity-40"></span>
    <span class="relative z-[1]">Shine</span>
  </button>
</section>
</div>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tbh34a-warm: #e8a94a;
  --color-tbh34a-warm: oklch(0.78 0.16 65);
  --color-tbh34a-stage: #1a1206;
  --color-tbh34a-stage: oklch(0.2 0.04 70);
  --color-tbh34b-warm: #e8c04a;
  --color-tbh34b-warm: oklch(0.82 0.16 85);
  --color-tbh34b-ink: #1a1206;
  --color-tbh34b-ink: oklch(0.22 0.04 85);
  --color-tbh34b-stage: #171205;
  --color-tbh34b-stage: oklch(0.18 0.03 85);
  --font-tbh34-sans: 'Space Grotesk', system-ui, sans-serif;
}
/* Nothing stays CSS: two gradients, a scale, a rotation and a text-shadow. */

.tbh-34-group {
  width: 100%;
  min-height: 100svh;
}

.tbh-34a,
.tbh-34b {
  min-height: 100svh;
}
```

How this works

An opaque bloom, not a ripple. Entry 28 fades as it grows (energy dissipating); this one stays solid and floods (light arriving). Same two properties, opposite intent — and the pair is a good illustration that the technique is never the design decision.

The label participates. A text-shadow bloom on hover is what stops the effect looking like a background swap. It is one arbitrary utility and it does more for the illusion than the gradient's stops do.

Rays need scale and rotation together. Design B's conic layer arrives by growing from 0 and turning 30deg at the same time, which reads as light sweeping into place. In CSS that was transform: translate(-50%,-50%) scale(1) rotate(30deg) — five values, three of them repeated from the resting state. Here the hover names scale-100 and [rotate:30deg] and nothing else.

Make it yours

  • Bloom reach: hover:before:scale-[2.4] — enough to clear a pill; raise it for wide buttons.
  • Warmth: --color-tbh34a-warm; the border, fill, bloom and ring all derive from it via color-mix().
  • Ray density: the 6deg 18deg stops — tighter angles read as a starburst, wider as a pinwheel.
  • Idle pulse: add animate-pulse-style keyframes to the bloom layer for a button that breathes before it is touched.

Gotchas — read before shipping

  • overflow-hidden clips the bloom; without it a 2.4× gradient disc paints across the page.
  • Keep the bloom below the label (before:z-0 vs relative z-[1]), or the text washes out at full brightness.
  • Check label contrast at the BRIGHTEST frame — white text on a fully bloomed warm gradient is the risk, which is why design A keeps a solid ink and a text-shadow rather than lowering the text's opacity.
  • Design B's rays are white at 50% over a light fill, so its label is dark ink; inverting either without the other fails contrast immediately.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Radial and repeating-conic gradients with transforms are universal; with CSS unavailable each button is a solid warm CTA.

Techniques used in this demo

Utilitiesfirst-class utility or variant

radial-gradient()tw ↗text shadowtw ↗prefers-reduced-motiontw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →