CSS3 – 3D pressed button

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

Advertisements

3 thoughts on “CSS3 – 3D pressed button”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s