Skip to content

3D Pushable Buttons

Tailwind CSS 3D buttons with a raised edge that lift on hover and press down on click, with sizes, icon buttons and toggles.

Also known as: 3d push button, pushable button, press down button effect, chunky button style, tactile 3d buttons

Tailwind CSS Button Styles Responsive #3d #animation #button #hover #toggle

3D Pushable Buttons live demo

Open in new tab

Tailwind CSS code (HTML, CSS, JS)

A set of chunky 3D pushable buttons built with Tailwind CSS: each button has a raised front face sitting on a darker edge, lifts slightly on hover and sinks into the page when it is clicked. The set includes color variants, three sizes, round icon buttons, a disabled state and toggle buttons that stay pressed, ready for call-to-action areas, games and playful landing pages.

How it works

Every button is a real button.pb-push containing three stacked spans. .pb-shadow is a blurred, semi-transparent layer that sits below everything, .pb-edge is the darker "side" of the key (for example bg-rose-900), and .pb-front is the colored face with the label (for example bg-rose-600). The two back layers are absolutely positioned to fill the button, and the front face is moved up with transform: translateY(var(--pb-rest)), which reveals the edge underneath and creates the 3D look.

style.css handles the motion. On hover (only on devices that support it) the face rises to --pb-hover and the shadow drops; on :active the face moves down to --pb-press with a very short transition, so the click feels instant, and on release it springs back with a cubic-bezier(.3, .7, .4, 1) easing. A gradient on .pb-edge darkens its ends to suggest a curved surface.

The optional script initializes every .pb-buttons section. Buttons with data-pb-toggle flip their aria-pressed value on click, swap the text inside [data-pb-label] with data-on-label or data-off-label, and announce the new state. While aria-pressed="true" the face stays sunk and a .pb-check icon appears. Without JavaScript all the press animations still work.

Customization

  • --pb-rest, --pb-hover and --pb-press on .pb-push in style.css: control the button height at rest, on hover and while pressed.
  • .pb-push--sm and .pb-push--lg: size modifiers that set shallower or deeper edges; combine them with smaller or larger padding on .pb-front.
  • --pb-speed on .pb-push: changes how slowly the face springs back after a click.
  • Swap the pair bg-rose-900 on .pb-edge and bg-rose-600 on .pb-front for any Tailwind shade pair to create a new color; keep the edge two or three steps darker.
  • Replace rounded-xl with rounded-full on the button and all three spans for pill or circular buttons, as in the icon examples.
  • data-on-label and data-off-label on a [data-pb-toggle] button: set the text shown in each state.

Use cases

  • Landing pages: a raised call-to-action that sinks into the page when clicked
  • Games and playful sites: chunky colored keys in three sizes feel like real arcade buttons
  • Kids and education apps: big, friendly buttons with round icon variants invite tapping
  • Settings screens: toggle buttons stay pressed to show an on state, with a disabled style for unavailable options
  • Design systems: a reference set of color variants for primary and secondary actions

Accessibility

All controls are native button elements, so Enter and Space trigger them and they appear in the tab order. Decorative layers and icons use aria-hidden="true"; the icon-only buttons have an aria-label. Toggle buttons expose their state with aria-pressed, and a visually hidden [data-pb-status] region with aria-live="polite" announces the new label. Keyboard focus shows a thick dark outline offset from the button. Under prefers-reduced-motion: reduce the transitions are removed and the buttons change position instantly. Darker shades were chosen for white text to keep contrast readable.

Usage notes

Requires the Tailwind browser build (added automatically). Several .pb-buttons sections can share a page because the script scopes all queries to each section.

3D Pushable Buttons at a glance

Framework
Tailwind CSS
Code
HTML, CSS, JavaScript
JavaScript
Vanilla JavaScript, no jQuery
Dependencies
Tailwind CSS
Layout
Responsive, works on mobile
Category
Button Styles
License
Free for personal and commercial use

Questions about this template

Can I use the 3D Pushable Buttons code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

Load Tailwind CSS from a CDN (the links are under Requirements). Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Does it work on mobile?

Yes. The layout adapts to small screens. Use the Mobile and Tablet buttons above the live demo to check it at phone and tablet width.

Requirements

Add these to your page (already included in the download):

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

The Tailwind browser build is for prototyping. In production, compile Tailwind with its CLI or your bundler.

3D Pushable Buttons – Tailwind CSS button styles component screenshot
3D Pushable Buttons · Tailwind CSS Button Styles

More Button Styles

Gradient Buttons – Pure CSS button styles preview

Gradient Buttons

Pure CSS gradient buttons with shifting colors on hover, a gradient outline, glow and shine effects, sizes and a disabled state.

Pure CSS Button Styles
Animated Hover Buttons – Pure CSS button styles preview

Animated Hover Buttons

Eight pure CSS hover buttons with fill, diagonal, sliding text, border drawing, arrow, underline and press effects that also run on focus.

Pure CSS Button Styles
Buttons with Loading State – Bootstrap 5 button styles preview

Buttons with Loading State

Bootstrap 5 buttons that show a spinner, block repeat clicks while working and then display a success or error state, in solid, outline, pill and icon styles.

Bootstrap 5 Button Styles
Button Variants – Tailwind CSS button styles preview

Button Variants

Tailwind CSS button set with primary, secondary, outline, ghost, danger and link variants, five sizes, icon buttons, loading and disabled states.

Tailwind CSS Button Styles