Create A CSS 3D Push Button

CSS

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.

View the demo to see the finished button.

Demo

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.

Upgrade to access all content on Paulund

Members unlock all tutorials and snippets

Access to all downloadable content

Access to code examples before others

Sign Up Now

Already a member? Login here

Subscribe To Newsletter

Get weekly updates to your email