BUTTONS

3D Press Button

A tactile 3D-style button with a realistic pressed effect. Copy the code and use it in your own project.

HTML
<button class="press-btn" type="button">
  <span>Press Me</span>
</button>
CSS
.press-btn{
  padding:15px 34px;
  border:0;
  border-radius:10px;
  background:#8b5cf6;
  color:#ffffff;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  box-shadow:
    0 7px 0 #5b21b6,
    0 12px 24px rgba(0,0,0,.25);
  transition:
    transform .12s ease,
    box-shadow .12s ease;
}

.press-btn:hover{
  transform:translateY(-1px);
  box-shadow:
    0 8px 0 #5b21b6,
    0 14px 26px rgba(0,0,0,.28);
}

.press-btn:active{
  transform:translateY(6px);
  box-shadow:
    0 1px 0 #5b21b6,
    0 5px 12px rgba(0,0,0,.22);
}

How This 3D Press Button Works

The 3D Press Button creates a tactile push-down effect using CSS transforms and layered shadows. The HTML stays simple, using a standard button with a span for the visible “Press Me” text.

The button uses a purple #8b5cf6 background with a darker #5b21b6 shadow positioned 7px below it. This lower shadow acts like the physical base of the button and gives it a raised 3D appearance.

A second softer shadow, 0 12px 24px rgba(0,0,0,.25), adds depth around the button. Together, these two shadows make the component appear elevated from the page instead of looking like a flat interface element.

When the user hovers over the button, translateY(-1px) moves it slightly upward while the lower shadow increases from 7px to 8px. This creates a subtle raised response before the button is pressed.

The main interaction happens with the :active state. While the button is being pressed, translateY(6px) moves it downward and the solid lower shadow shrinks to just 1px. This combination makes the button visually compress toward its base, creating the realistic pressed effect. You can learn more about this interaction state in the MDN Web Docs guide to :active.

The transform and box-shadow properties use a short .12s transition, so the movement feels quick and responsive when the user presses and releases the button.

Customizing This 3D Press Button

You can customize the 3D Press Button by changing a few CSS values while keeping the same HTML structure. The button colors, depth, press distance, size, corner radius, and shadow strength can all be adjusted to match your design.

  • Button color: Change #8b5cf6 to match your website or interface color palette.
  • 3D base color: Change #5b21b6 to control the darker layer underneath the button.
  • Button depth: Adjust the 7px vertical offset in the first box-shadow to make the button look deeper or flatter.
  • Press distance: Change translateY(6px) in the :active state to control how far the button moves down.
  • Button size: Modify padding: 15px 34px to make the button smaller or larger.
  • Press speed: Adjust the .12s transition duration for a quicker or softer pressing response.

Where to Use This 3D Press Button

The 3D Press Button works well in interfaces where you want a click to feel more physical and responsive. Its raised appearance and pressed-down state give users clear visual feedback when they interact with it.

  • Call-to-action buttons: Use it for actions such as “Get Started,” “Buy Now,” or “Continue.”
  • Game interfaces: A good fit for controls, menus, and interactive game-style layouts.
  • Landing pages: Use it for important actions that need stronger visual feedback.
  • Interactive dashboards: Add it to controls that users click frequently.
  • Creative websites: Works well with playful, bold, or dimensional interface designs.
  • Mobile-style interfaces: The press-down movement can make tap-oriented controls feel more tactile.

Because the entire 3D effect uses CSS, the button remains lightweight and does not require JavaScript for its press animation.

If you want another CSS-only button style, check out the Animated Border Button, which uses a continuously moving gradient border instead of a physical press effect.

Frequently Asked Questions

Does the 3D Press Button require JavaScript?
No. The complete 3D press effect is created with CSS using shadows, transforms, and the :active state.

How does the button create the 3D effect?
A solid dark-purple box-shadow sits below the button and acts like its raised base. An additional soft shadow adds more depth around the component.

What happens when the button is pressed?
The :active state moves the button downward by 6px while reducing the lower shadow from 7px to 1px, making the button appear physically pressed.

Can I change how deep the button looks?
Yes. Adjust the vertical offset of the first box-shadow and the translateY() value to create a deeper or flatter pressing effect.

The 3D Press Button creates a convincing tactile interaction using only CSS. Its raised shadow, quick hover response, and compressed active state make each click feel more physical while keeping the component simple, lightweight, and easy to customize.

Scroll to Top