~/css/tailwind-button-hover-effects

6 Tailwind Button Hover Effects

6 TailwindPublished 2026-10-05Free · no sign-up

Six button hovers in Tailwind: an outline button that fills from the left, a glossy shine that sweeps across, an arrow that slides forward, a chunky 3D button that presses down, a neon glow and an icon button that widens to reveal its label.

Filter demos

01. Tailwind Fill-from-Left Button

TailwindButtonHover

An outline button that floods with colour from the left on hover. The fill is a gradient background whose size transitions from 0% to 100%, so no extra elements are needed, and the text colour changes with it.

View code

<button type="button" class="rounded-lg border-2 border-indigo-700 bg-gradient-to-r from-indigo-700 to-indigo-700 bg-[length:0%_100%] bg-no-repeat px-6 py-3 font-semibold text-indigo-700 transition-[background-size,color] duration-300 hover:bg-[length:100%_100%] hover:text-white focus-visible:bg-[length:100%_100%] focus-visible:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-700 motion-reduce:transition-none">Book a demo</button>

02. Tailwind Shine Sweep Button

TailwindButtonShine

A glossy streak sweeps across the button when hovered. The streak is a skewed, semi-transparent span parked off the left edge and moved past the right edge on group-hover, inside a button with overflow-hidden.

View code

<button type="button" class="group relative overflow-hidden rounded-xl bg-gradient-to-r from-violet-700 to-fuchsia-700 px-7 py-3 font-bold text-white shadow-lg focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-fuchsia-300">
  <span aria-hidden="true" class="absolute inset-y-0 -left-1/2 w-1/3 -skew-x-12 bg-white/30 transition-transform duration-700 group-hover:translate-x-[450%] motion-reduce:hidden"></span>
  <span class="relative">Upgrade now</span>
</button>

03. Tailwind Button with Sliding Arrow

TailwindButtonIcon

The arrow in the button glides forward on hover, a small cue that the button goes somewhere next. The icon is an aria-hidden SVG and the translate runs on hover and keyboard focus.

View code

<a href="#signup" class="group inline-flex items-center gap-2 rounded-full bg-slate-900 py-3 pl-6 pr-5 font-semibold text-white hover:bg-slate-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-900">Create account
  <svg aria-hidden="true" viewBox="0 0 20 20" fill="currentColor" class="size-5 transition-transform group-hover:translate-x-1 group-focus-visible:translate-x-1 motion-reduce:transition-none"><path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.64l-3.2-3.2a.75.75 0 1 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 1 1-1.06-1.06l3.2-3.2H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd"/></svg>
</a>

04. Tailwind 3D Press Button

TailwindButton3D

A chunky button sitting on a solid ledge drawn with a hard box-shadow. It rises on hover and sinks flat when pressed, by moving with translate while the shadow shrinks to match.

View code

<button type="button" class="rounded-xl bg-indigo-600 px-7 py-3 font-bold text-white shadow-[0_6px_0_#3730a3] transition-all duration-100 hover:-translate-y-0.5 hover:shadow-[0_8px_0_#3730a3] active:translate-y-1.5 active:shadow-[0_0_0_#3730a3] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-indigo-600">Play now</button>

05. Tailwind Neon Glow Button

TailwindButtonGlow

An outlined cyan button that fills and glows on hover, with the glow from an arbitrary box-shadow. Text switches to dark slate on the bright fill so it stays readable.

View code

<button type="button" class="rounded-lg border-2 border-cyan-400 px-6 py-3 font-semibold text-cyan-300 transition duration-300 hover:bg-cyan-400 hover:text-slate-900 hover:shadow-[0_0_24px_rgba(34,211,238,.6)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-cyan-300">Connect wallet</button>

06. Tailwind Icon Button that Expands

TailwindButtonLabel

A round icon button that widens to show its label on hover or focus. The label is always in the markup, just clipped by max-w-0, so the button has a proper accessible name even while it looks icon-only.

View code

<button type="button" class="group inline-flex h-12 items-center rounded-full bg-emerald-700 px-3.5 text-white shadow-md hover:bg-emerald-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-700">
  <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" class="size-5 shrink-0"><path d="M12 5v14M5 12h14"/></svg>
  <span class="max-w-0 overflow-hidden whitespace-nowrap font-semibold transition-all duration-300 group-hover:ml-2 group-hover:max-w-[8rem] group-focus-visible:ml-2 group-focus-visible:max-w-[8rem] motion-reduce:transition-none">New project</span>
</button>

About these Tailwind Button Hover Effects

Animate background-size

A gradient with bg-[length:0%_100%] growing to 100% fills a button without extra elements. Use transition-[background-size,color] to animate it.

Shine with a skewed span

A semi-transparent, skewed span parked outside the button and moved across on group-hover makes the sweep; overflow-hidden clips it.

Hard shadows for 3D

shadow-[0_6px_0_#3730a3] draws a solid ledge; on active: translate the button down by the same amount and shrink the shadow to zero.

Labels that never disappear

An icon button that expands keeps its label in the markup, clipped by max-w-0, so it always has an accessible name.

Frequently asked questions

Do these need JavaScript?

No. All six are CSS-only Tailwind classes.

Will the 3D button work with keyboard?

Yes. Space and Enter trigger :active on buttons in most browsers.

Is there a CSS version?

Yes, see the CSS button hover effects collection.