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!

The post CSS3 3D button appeared first on CSS STARS.