The last example is a pressed button effect. This time we don’t need the transition attribute. Instead, we need to make changes on the CSS attributes such as text-shadow and the background-image gradient on mouse hover. For more information, please refer to the original post by Joshua Johnson.
Joshua Johnson – Four Simple and Fun CSS Button Hover Effects for Beginners
Here comes the complete source code.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Design Shack Button Examples by Joshua Johnson</title>
<style media='screen' type='text/css'>
a.buttonText {
color: white;
text-decoration: none;
font: 18px/1.5 Helvetica,Arial,sans-serif;
}
#button4 {
/* Basic CSS */
background: #5c5c5c;
text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3);
font-size: 22px;
height: 58px;
width: 155px;
margin: 50px 0 0 50px;
overflow: hidden;
display: block;
text-align: center;
line-height: 58px;
/* Rounded Corners */
-webkit-border-radius: 5px; /* Chrome & Safari */
-moz-border-radius: 5px; /* Firefox */
-khtml-border-radius: 5px; /* Linux browsers */
border-radius: 5px; /* CSS3 */
/* Gradient */
background-image: -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.2));
background-image: -moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.2));
background-image: -o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.2));
background-image: -ms-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.2));
background-image: linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.2));
/* Shadow */
-webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8);
box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8);
}
#button4:hover {
margin-top: 52px;
/* Shadow */
-webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8);
box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8);
/* Gradient */
background-image: -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.4));
background-image: -moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.4));
background-image: -o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.4));
background-image: -ms-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.4));
background-image: linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.4));
}
</style>
</head>
<body>
<p>Tutorial by Joshua Johnson. <a href='http://designshack.net/articles/css/four-simple-and-fun-css-button-hover-effects-for-beginners/'>View original example</a></p>
<a href='#' id='button4' class='buttonText'>Sign Up Now</a>
</body>
</html>
Done =)
Next:
Reference: Joshua Johnson – Four Simple and Fun CSS Button Hover Effects for Beginners
Eureka! 
3 thoughts on “CSS3 – 3D pressed button”