Create A CSS 3D Push Button
Paulund is full of premium tutorials and support to help with your development
Sign up to get full access to all tutorials.
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.