CSS3 3D button

How we can use CSS transitions to make it look like a button is 3D when you push it? We can achieve this with the use of an <a> tag and few lines of css.

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.

HTML for CSS3 3D Button

 <a href="javascript:void(0);">Push me!</a>

CSS for CSS3 3D Button

.myButton {
	position: relative;
	color: #FFF;
	text-decoration: none;
	background-color: #0599E6;
	font: 700 2.5em arial;
	display: block;
	padding: 4px;
	border-radius: 10px;
	margin: 50px auto;
	width: 200px;
	text-align: center;
	/*Styles for transition*/
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-ms-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
	/*Styles for 3d effect*/
	-moz-box-shadow: 0px 9px 0px #065781, 0px 9px 25px #444545;
	-webkit-box-shadow: 0px 9px 0px #065781, 0px 9px 25px rgba(0,0,0,.7);
	box-shadow: 0px 9px 0px #065781, 0px 9px 25px rgba(0,0,0,.7);

.myButton:active {
		box-shadow: 0px 3px 0px #065781, 0px 3px 6px rgba(0,0,0,.9);
		position: relative;
		top: 6px;

By adding top: 6px, we adding the effect that is is beeing pushed down.

Demo for CSS3 3D Button

Push me!

5 thoughts on “Responsive Table with CSS Media Queries

  1. Hi thanks for this post! I am trying to get iphone 5 to work with displaying a table that I’ve used as follows: http://tasteandsee.com/holiday-gift-guide-for-the-cook/

    I have tried a few different media queries specific to 320px width but to no avail.

    You will see I am not using the table as a traditional data table, instead it is a manual build of a shopping page so it has product images and links to purchase, etc. There are no header rows and so on.

    Is there a way to use a media query to get this table to display in a single column on smartphone w/320px width, such as iphone 5?

    Thank you!!

Leave a Reply

Your email address will not be published. Required fields are marked *