3D Pushable Button Template

Add a delightful and tactile feel to your interface with this 3D pushable button.

This button uses clever shadow effects to create the illusion of depth, making it look and feel like it's being physically pushed down when the user clicks it.

Get Source Code Preview

About the 3D Pushable Button

This button provides a fun, skeuomorphic-inspired interaction. Before flat design became the norm, interfaces often tried to mimic real-world objects. This button brings back some of that tactile satisfaction. It's great for game interfaces, children's websites, or any project aiming for a playful and engaging user experience.

Features

Tactile "Push" Effect: The combination of shadows and transforms creates a convincing 3D pressing motion on click.
Pure CSS and HTML: The entire 3D illusion is created without any JavaScript, making the button lightweight and simple to use.
Color Customization: Easily change the button's main color and its "bottom" or shadow color by adjusting the CSS custom properties.
Fully Accessible: Built on a semantic button element, it includes a clear focus state to ensure it is usable by everyone.

Code Breakdown

The 3D effect is created by using a thick, dark box-shadow to simulate the button's "bottom" edge. In its default state, the button is slightly raised using a transform. On hover, it raises a little more. When the :active pseudo-class is triggered (during a click), the box-shadow is removed and the button's position is translated down, creating the illusion that it is being pressed flush with the surface.

Code

Here is the complete code for the 3D pushable button.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Pushable Button</title>
    <style>
        /*
         Component: 3D Pushable Button
         Description: A skeuomorphic-style button that looks like it's being pressed.
        */

:root {
            /* Using high contrast colors for the 3D effect */
            --push-btn-bg: #f94144; /* Bright red */
            --push-btn-bottom-color: #c71f22; /* A darker red for the shadow */
            --push-btn-text-color: #ffffff;
            --push-btn-focus-outline: #f94144;
            --push-btn-bottom-height: 6px;
        }

.push-container-1 {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 250px;
            background-color: #f0f2f5;
        }

.push-btn-1 {
            display: inline-block;
            position: relative;
            padding: 1rem 2rem;
            font-size: 1.25rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            
            color: var(--push-btn-text-color);
            background-color: var(--push-btn-bg);
            
            border: none;
            border-radius: 12px;
            cursor: pointer;
            text-decoration: none;

/* The 'bottom' of the button created by box-shadow */
            box-shadow: 0 var(--push-btn-bottom-height) 0 0 var(--push-btn-bottom-color);

/* The default state has the button slightly pushed down to be 'lifted' on hover */
            transform: translateY(2px);
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }

.push-btn-1:hover {
            /* Lifts the button to its 'resting' state before being pressed */
            transform: translateY(0);
        }
        
        .push-btn-1:active {
            /* 'Pushes' the button all the way down */
            transform: translateY(var(--push-btn-bottom-height));
            box-shadow: 0 0 0 0 var(--push-btn-bottom-color); /* Hides shadow completely when pushed */
        }
        
        .push-btn-1:focus-visible {
            outline: 3px solid var(--push-btn-focus-outline);
            outline-offset: 4px;
        }
    </style>
</head>
<body>

<div class="push-container-1">
        <button type="button" class="push-btn-1">Launch Game</button>
    </div>

</body>
</html>

View Output