36 Tailwind CSS Button Hover Effects
27 / 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 Hard Shadow Shift Flat Button Effect

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.

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-27-group w-full min-h-svh flex flex-wrap">
<section class="tbh-27a flex-[1_1_340px] min-w-[300px] grid place-items-center px-6 py-14 font-tbh27-sans bg-tbh27a-stage" aria-label="Hard shadow shift button">
  <button type="button" class="cursor-pointer rounded-lg border-2 border-tbh27-ink px-[38px] py-4 text-base font-extrabold text-white bg-tbh27a-fill shadow-[6px_6px_0_var(--color-tbh27-ink)] transition-[translate,scale,box-shadow] duration-[160ms] ease-out hover:translate-x-[6px] hover:translate-y-[6px] hover:shadow-[0_0_0_var(--color-tbh27-ink)] focus-visible:translate-x-[6px] focus-visible:translate-y-[6px] focus-visible:shadow-[0_0_0_var(--color-tbh27-ink)] active:scale-[.98] focus-visible:outline-3 focus-visible:outline-tbh27-ink focus-visible:outline-offset-[5px] motion-reduce:transition-[box-shadow] motion-reduce:hover:translate-x-0 motion-reduce:hover:translate-y-0">
    Get the kit
  </button>
</section>
<section class="tbh-27b flex-[1_1_340px] min-w-[300px] grid place-items-center px-6 py-14 font-tbh27-sans bg-tbh27b-stage" aria-label="Lift hard shadow button">
  <button type="button" class="cursor-pointer rounded-lg border-2 border-tbh27b-ink px-10 py-4 text-base font-extrabold text-tbh27b-ink bg-tbh27b-fill shadow-[0_0_0_var(--color-tbh27b-ink)] transition-[translate,box-shadow] duration-[160ms] ease-out hover:-translate-x-[5px] hover:-translate-y-[5px] hover:shadow-[5px_5px_0_var(--color-tbh27b-ink)] focus-visible:-translate-x-[5px] focus-visible:-translate-y-[5px] focus-visible:shadow-[5px_5px_0_var(--color-tbh27b-ink)] active:-translate-x-[2px] active:-translate-y-[2px] active:shadow-[2px_2px_0_var(--color-tbh27b-ink)] focus-visible:outline-3 focus-visible:outline-tbh27b-ink focus-visible:outline-offset-[5px] motion-reduce:transition-[box-shadow] motion-reduce:hover:translate-x-0 motion-reduce:hover:translate-y-0">
    Download deck
  </button>
</section>
</div>
@import "tailwindcss";

@theme {
  --color-tbh27-ink: #16130f;
  --color-tbh27-ink: oklch(0.18 0.01 60);
  --color-tbh27a-fill: #3f6ad0;
  --color-tbh27a-fill: oklch(0.55 0.17 255);
  --color-tbh27a-stage: #f0ede4;
  --color-tbh27a-stage: oklch(0.94 0.012 90);
  --color-tbh27b-ink: #1a1206;
  --color-tbh27b-ink: oklch(0.22 0.04 85);
  --color-tbh27b-fill: #ffcf4d;
  --color-tbh27b-fill: oklch(0.88 0.17 90);
  --color-tbh27b-stage: #faf4e8;
  --color-tbh27b-stage: oklch(0.97 0.015 85);
  --font-tbh27-sans: 'Space Grotesk', system-ui, sans-serif;
}
/* Nothing stays CSS: one shadow and one matching translate per state. */

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

.tbh-27a,
.tbh-27b {
  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-tbh27-ink: #16130f;
  --color-tbh27-ink: oklch(0.18 0.01 60);
  --color-tbh27a-fill: #3f6ad0;
  --color-tbh27a-fill: oklch(0.55 0.17 255);
  --color-tbh27a-stage: #f0ede4;
  --color-tbh27a-stage: oklch(0.94 0.012 90);
  --color-tbh27b-ink: #1a1206;
  --color-tbh27b-ink: oklch(0.22 0.04 85);
  --color-tbh27b-fill: #ffcf4d;
  --color-tbh27b-fill: oklch(0.88 0.17 90);
  --color-tbh27b-stage: #faf4e8;
  --color-tbh27b-stage: oklch(0.97 0.015 85);
  --font-tbh27-sans: 'Space Grotesk', system-ui, sans-serif;
}
/* Nothing stays CSS: one shadow and one matching translate per state. */

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

.tbh-27a,
.tbh-27b {
  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.

  • Worth reading against entry 11: identical mechanics, opposite intent. 11 snaps onto a neon glow, 27 lands quietly in monochrome, and keeping them separate entries is only defensible because the palettes and the hover shadows differ completely — the utilities make that comparison immediate.
  • Design B's active: stage is the detail the CSS original also had, but here it reads as a third position in a sequence (0 → 5 → 2) rather than a rule at the bottom of a block.
  • UI change from the CSS original: both designs mirror the shift on focus-visible:, and design A gained an active:scale-[.98] that composes with the landing translate instead of replacing it.
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 Hard Shadow Shift Flat Button Effect
Source: https://codefronts.com/motion/tailwind-css-button-hover-effects/tailwind-hard-shadow-shift-flat-button-effect/

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 &mdash; monochrome and graphic, distinct from entry 11's neon snap. Design B runs the same mechanic in reverse, lifting off the page instead.
## HTML
```html
<div class="tbh-27-group w-full min-h-svh flex flex-wrap">
<section class="tbh-27a flex-[1_1_340px] min-w-[300px] grid place-items-center px-6 py-14 font-tbh27-sans bg-tbh27a-stage" aria-label="Hard shadow shift button">
  <button type="button" class="cursor-pointer rounded-lg border-2 border-tbh27-ink px-[38px] py-4 text-base font-extrabold text-white bg-tbh27a-fill shadow-[6px_6px_0_var(--color-tbh27-ink)] transition-[translate,scale,box-shadow] duration-[160ms] ease-out hover:translate-x-[6px] hover:translate-y-[6px] hover:shadow-[0_0_0_var(--color-tbh27-ink)] focus-visible:translate-x-[6px] focus-visible:translate-y-[6px] focus-visible:shadow-[0_0_0_var(--color-tbh27-ink)] active:scale-[.98] focus-visible:outline-3 focus-visible:outline-tbh27-ink focus-visible:outline-offset-[5px] motion-reduce:transition-[box-shadow] motion-reduce:hover:translate-x-0 motion-reduce:hover:translate-y-0">
    Get the kit
  </button>
</section>
<section class="tbh-27b flex-[1_1_340px] min-w-[300px] grid place-items-center px-6 py-14 font-tbh27-sans bg-tbh27b-stage" aria-label="Lift hard shadow button">
  <button type="button" class="cursor-pointer rounded-lg border-2 border-tbh27b-ink px-10 py-4 text-base font-extrabold text-tbh27b-ink bg-tbh27b-fill shadow-[0_0_0_var(--color-tbh27b-ink)] transition-[translate,box-shadow] duration-[160ms] ease-out hover:-translate-x-[5px] hover:-translate-y-[5px] hover:shadow-[5px_5px_0_var(--color-tbh27b-ink)] focus-visible:-translate-x-[5px] focus-visible:-translate-y-[5px] focus-visible:shadow-[5px_5px_0_var(--color-tbh27b-ink)] active:-translate-x-[2px] active:-translate-y-[2px] active:shadow-[2px_2px_0_var(--color-tbh27b-ink)] focus-visible:outline-3 focus-visible:outline-tbh27b-ink focus-visible:outline-offset-[5px] motion-reduce:transition-[box-shadow] motion-reduce:hover:translate-x-0 motion-reduce:hover:translate-y-0">
    Download deck
  </button>
</section>
</div>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tbh27-ink: #16130f;
  --color-tbh27-ink: oklch(0.18 0.01 60);
  --color-tbh27a-fill: #3f6ad0;
  --color-tbh27a-fill: oklch(0.55 0.17 255);
  --color-tbh27a-stage: #f0ede4;
  --color-tbh27a-stage: oklch(0.94 0.012 90);
  --color-tbh27b-ink: #1a1206;
  --color-tbh27b-ink: oklch(0.22 0.04 85);
  --color-tbh27b-fill: #ffcf4d;
  --color-tbh27b-fill: oklch(0.88 0.17 90);
  --color-tbh27b-stage: #faf4e8;
  --color-tbh27b-stage: oklch(0.97 0.015 85);
  --font-tbh27-sans: 'Space Grotesk', system-ui, sans-serif;
}
/* Nothing stays CSS: one shadow and one matching translate per state. */

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

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

How this works

Two directions, one invariant. Whatever the offset is, the translate must match it on both axes — design A moves +6/+6 into a shadow that collapses, design B moves -5/-5 away from the page and grows one. The port puts offset and travel in the same class list, so the pairing is checkable by eye.

Design B has a three-stage life. Flat at rest, lifted 5px on hover with a 5px shadow, half-lifted 2px on press with a 2px shadow. That third stage is what makes it feel like a physical card rather than a toggle — and it is three utilities, not a third rule block.

No blur, no gradient, no radius beyond 8px. The whole aesthetic is that the shadow is a shape, not a light effect. Blur-free is the design, which the gotchas restate because it is the first thing people 'fix'.

Make it yours

  • Float height: the shadow offset and its matching translate, together — 4px is subtle, 8px is poster-like.
  • Direction: design A lands down-right, B lifts up-left. Any diagonal works as long as the signs match.
  • Palette: --color-tbh27-ink is shared by border, shadow and focus ring; each design supplies its own fill.
  • Residual shadow: hover:shadow-[1px_1px_0_...] instead of 0_0_0 keeps a hairline so the button never looks fully welded to the page.

Gotchas — read before shipping

  • The hover translate must equal the resting offset exactly. Off by a pixel and the button appears to slide rather than land.
  • Blur-free is intentional; a soft shadow here reads as a different (and much more common) design language.
  • Keep the travel inside the click target's tolerance — a button that moves 6px under a stationary cursor should still be under that cursor afterwards, which 6px is.
  • focus-visible:outline-offset-[5px] clears both the 2px border and the shadow, so the ring is not mistaken for part of the graphic.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Solid box-shadow and transforms are universal; nothing here needs a fallback beyond Tailwind v4's own floor.

Techniques used in this demo

Utilitiesfirst-class utility or variant

box-shadowtw ↗transitionstw ↗:focus-visibletw ↗prefers-reduced-motiontw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →