How to Create a CSS Pressed Button Effect

In this tutorial, we will be creating a CSS pressed button effect. This button will have the appearance of being depressed and will include an option to stay stuck when clicked. The entire process is written for beginners and makes for a simple way to begin digging into and learning style modifications.

The CSS pressed button effect is a very simple effect that can be added to any button. The button expressed in the following example should depress when clicked, and bounce back upon release. Go ahead and test it out.

Test Me

How it works: We first create a button class, and apply the transform property to the active selector. Then, we add the button snippet somewhere on the site. Here's the complete breakdown.

Creating a Pressed Button Effect using CSS

1. Add the following to your themes style.css file.

   .mybutton {
   box-shadow: 0px 2px 2px #777;
   padding: 10px 20px;
   font-size: 22px;
   text-align:center;
   }
   .mybutton:active {
   transform:translateY(2px);
   box-shadow: 0 0 0;
   outline: 0;
   }

2. Then, include the following snippet on your site wherever you would like to place your button (replacing Test Me with your own button text).

   <button class="mybutton">Test Me</button>

Modify CSS to Create a Sticky Button

Optional:  If you want to create a button that stays pressed when clicked simply modify your CSS to include the :focus pseudo class. Here is how that would look after inclusion.

.mybutton:active, .mybutton:focus { 
transform:translateY(2px); 
box-shadow: 0 0 0; outline: 0; 
}

And here is an example of how that sticky button should act;

Sticky Button

Edit or Fork on CodePen

You can edit and play with this code live by running it below. Or if you'd like, fork it from CodePen:

See the Pen
CSS Pressed and Sticky Buttons by lancelhoff (@lancelhoff)
on CodePen.