Chunky Buttons

Minamlist way of creating chunky bottons. Full css available here: http://forrst.com/posts/Chunky_3D_CSS3_Buttons-w4D

by kshep92

HTML

<a href=#>Chunky</a>

CSS

a { /* Normal State */
    margin-top: 10px;
    display: block;
    padding: 4px 15px 7px 15px;
    width: 80px;
    height: auto;
        background: #999;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    font-style: normal;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    text-decoration: none;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.50);
    border-radius: 3px;
    -webkit-border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.50);
    border-top: 1px solid rgba(0,0,0,0.001);
   
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.35), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);
    cursor: pointer;
}
a.active {
    border-top: 1px solid rgba(0,0,0,0.55);
    padding: 6px 15px 5px 15px;
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50);
}

html { -webkit-tap-highlight-color: rgba(0,0,0,0); }

JavaScript

(function() {
    $("a").on("touchstart", function() {
    $(this).addClass("active");
    });
    
    $("a").on("touchend", function() {
    $(this).removeClass("active");
    });
    
    $("a").click(function(e) { return false; });
})();