How to Make a Realistic Button Press Effect in CSS (No JavaScript)

✔︎ Last updated on September 29th, 2022

If you want to learn how can we achieve the button press effect in CSS, this article is for you.

I cover the entire process step by step using which you can achieve the same effect as shown in the featured image above.

At the end of this article, you will also find a Codepen in which you can fiddle around with the code and test that out for yourselves.

Let’s begin.

Create a Button

To achieve the button-press effect, we obviously need a button on our page. So, this is our entire HTML code for this project –

<button> 
    CLICK HERE 
</button>

By default, we get a pretty basic button styled by the browser using default settings. This is our output –

Let us spice it up a little using some CSS.

Styling the Button

Let’s start by increasing its font size and giving it some padding.

button {
    font-size: 2em;
    padding: 20px;
}

It’s already looking much better, but let’s keep going. Let’s make its corners rounded by giving it a border radius and make its background lightgreen in color.

button {
    /* write code so far here */

    border-radius: 10px;
    background: lightgreen;
}

Its border is a little thick to my taste, so let’s change that thickness to 1px.

button {
    /* write code so far here */

    border: 1px solid black;
}

Here’s the output –

Much better. Now let’s come to the next part.

Create a shadow

To create a realistic button press effect, we need to give it a 3-d look. We can do that by creating a shadow below the button.

This line of code would suffice to do that –

button {
    /* write code so far here */
	
    box-shadow: 0 8px #bbb; 
}

Great! Now, we come to the meat of the problem.

Simulate the button press using CSS

When a user presses the left mouse button, our green button should go down a little. And when the user releases the mouse button, the green button above should return to its original place.

So, we need a mechanism to apply our CSS styles when the button is being clicked.

Fortunately, CSS provides us a tool via which we can apply some styles only when the button is being clicked by the mouse – active pseudo-class.

The CSS declarations in the :active pseudo-class will apply only for the duration the user clicks and holds the mouse button. You can apply it like this –

button:active {
    /* CSS declarations here */
}

Now, when the green button is being clicked, we want two things –

• the button should go down a little bit (5 pixels is sufficient), and
• the shadow below the button should get a little darker and smaller (to simulate reality).

So this will be our CSS declaration for button:active pseudo-class –

button:active {
    box-shadow: 0 3px #999;
    transform: translateY(5px);
}

It works pretty well.

Our assignment is almost complete but we can improve the user experience a little bit more.

By default, when we hover the button, no visual feedback is given to the user to let him know that the button is clickable.

We can alter this behavior using another pseudo-class – :hover.

Using the :hover pseudo-class, we can apply our CSS rules only when the element is hovered by the mouse.

When the user hovers this green button, we want the following –

• the color of the button should get a bit darker
• the mouse cursor should change to a pointer (a finger pointing over the button)

We can achieve this by writing the following line of code –

button:hover {
    /* a little darker shade of green */
    background-color: #55ee33;
    cursor: pointer;
}

Much better.

Here’s the entire code in the Codepen editor.

See the Pen Realistic Button Press Effect by Gauri Shanker (@Gsbansal) on CodePen.

That brings us to the conclusion.

I hope you liked this tutorial. I would love to hear from you if you have other ideas on how we can improve this code further.

Please drop a line below and tell me what you think of this article. Thanks for reading.