Create A CSS 3D Push Button

In this tutorial we are going to look at how we can use CSS transitions to make it look like a button is 3D when you push it. For this we use the box-shadow property which starts off with a high value and when the visitors clicks the button we need to change the box shadow value to be lower making it look like the button is being pushed down. To achieve this look we are going to use the CSS active selector which becomes active when the visitor clicks on the attached element.

#Creating the Button

The HTML for this button is very simple as all the work is done by the CSS, all we have to do is create a link with a class of push_button.

<a href="#" class="push_button">
	Push Me
</a>

#The CSS

To create the CSS for this we first need to make the anchor tag look like a button, then we can create the active event for the button. Copy the following to create the button look.

/****************************************************
 * 	Push Button
 *****************************************************/
.push_button{
	position:relative;
	width:200px;
	color:#FFF;
	display:block;
	text-decoration:none;
	margin:0 auto;
	border-radius:5px;
	border:solid 1px #D94E3B;
	background:#cb3b27;
	text-align:center;
	padding:20px 30px;
	
	-webkit-transition: all 0.1s;
	-moz-transition: all 0.1s;
	transition: all 0.1s;
	
	-webkit-box-shadow: 0px 9px 0px #84261a;
        -moz-box-shadow: 0px 9px 0px #84261a;
        box-shadow: 0px 9px 0px #84261a;
}

This makes the button look like this.

To create the push effect we are going to use the CSS active selector. On this selector we need to reduce the size of the box-shadow on the button. Copy the following to create the active effect for the button.

.push_button:active{
    -webkit-box-shadow: 0px 2px 0px #84261a;
    -moz-box-shadow: 0px 2px 0px #84261a;
    box-shadow: 0px 2px 0px #84261a;
    position:relative;
    top:7px;
}

The important things to notice about this code is that both the button and the active selector has a position:relative and on the active effect we move this up by 7 pixels. By changing the button to move up 7 pixels it makes the button appear that it is being pushed down and not that just the box-shadow is being reduced. View the demo to see the effect it creates.