Back

Interactive 3D Button with Realistic Press Effect

Learn how to create an eye-catching 3D button with a satisfying click animation using only HTML and CSS.

HTML

The HTML structure is refreshingly simple—we only need a single button element with the class "button-3d".

        <button class="button-3d">CLICK</button>

CSS

Now let's create the 3D effect with CSS styling on our button class. First, we'll remove the default border and set a rich purple background color (#976D70) with white text for strong contrast. We'll add comfortable padding of 10px vertically and 20px horizontally to give the button appropriate size. The transition property set to 0.2 seconds ensures smooth animation when the button is pressed. The border-radius of 6px softens the edges for a more modern appearance. The magic of the 3D effect comes from our carefully crafted box-shadow property. We're actually applying two shadows: 1. A lighter purple shadow (#665367) positioned 7px below the button with a subtle 2px blur, creating the illusion of button height 2. A black shadow positioned 8px below with a larger 6px blur radius, simulating the button's cast shadow on the surface Finally, we set the cursor to pointer to visually indicate the button is clickable.

        .button-3d {
            border: none;
            background-color: #976D70;
            color: #fff;
            padding: 10px 20px;
            transition: 0.2s;
            border-radius: 6px;
            box-shadow: #665367 0 7px 2px, #000 0 8px 6px;
            cursor: pointer;
        }

The real interactive magic happens when the button is pressed. We use the :active pseudo-class to detect when the user clicks the button. When pressed, we transform the button by moving it downward 8px along the Y-axis, precisely matching the distance of our shadow effect. Simultaneously, we adjust the box-shadow property to remove the height shadow completely and reduce the surface shadow to a thin 3px blur, creating the convincing illusion that the button has been physically pressed down onto the surface.

        .button-3d:active {
            transform: translateY(8px);
            box-shadow: #665367 0 0 0, #000 0 0 3px;
        }

This technique creates a satisfyingly tactile experience for users, providing visual feedback that mimics a physical button press in the real world.

Whole code

<button class="button-3d">CLICK</button>

<style>
.button-3d {
  border: none;
  background-color: #976D70;
  color: #fff;
  padding: 10px 20px;
  transition: 0.2s;
  border-radius: 6px;
  box-shadow: #665367 0 7px 2px, #000 0 8px 6px;
  cursor: pointer;
}
.button-3d:active {
  transform: translateY(8px);
  box-shadow: #665367 0 0 0, #000 0 0 3px;
}

</style>

Interactive 3D Button with Realistic Press Effect

HTML

CSS

Whole code

Comments

More buttons

Similar

See also