Home Technology CSS3 Punch Button

CSS3 Punch Button

447 days ago by Imran Jafri 2

Here is a fine example of CSS3 ‘Punch’ Button by Chad Mazzola. There are plenty of others on his site. However I have only picked up the Punch Button to demo on this site. Below is its source code.


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>CSS3 Punch Button</title>
 <meta name="description" content="CSS Punch Button">
 <style>

 /* punch
*******************************************************************************/
button.punch {
 background: #4162a8;
 border-top: 1px solid #38538c;
 border-right: 1px solid #1f2d4d;
 border-bottom: 1px solid #151e33;
 border-left: 1px solid #1f2d4d;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 color: #fff;
 font: bold 20px "helvetica neue", helvetica, arial, sans-serif;
 line-height: 1;
 margin-bottom: 10px;
 padding: 10px 0 12px 0;
 text-align: center;
 text-shadow: 0px -1px 1px #1e2d4d;
 width: 150px;
 -webkit-background-clip: padding-box; }

button.punch:hover {
 -webkit-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 -moz-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 cursor: pointer; }

button.punch:active {
 -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
 -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
 box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
 margin-top: 8px; }
 </style>
</head>

<body>
 <div>
 <button class="punch">punch</button>
 </div>

</body>
</html>

[button link="http://maboot.com/stuff/demo/punchbutton.html"]Live Demo[/button]

Imran Jafri
Hello my name is Imran Jafri, I am the Editor and founder of Maboot Mag. I am extremely passionate about Web design, UX and GUI. I love to play with PHP, javascript and Wordpress. Of course I am a MAC and using Ubuntu as my secondary OS. That's all.