Buttons

by PhilQ

HTML

<div id="toolbar">
<button id="play">P</button>
<button id="playsegment">PS</button>
<button id="prevsegment">pv</button>
<button id="nextsegment">nx</button>
<div id="volume"><button id="mute">mu</button>
    <div><div></div></div>
</div>
</div>

CSS

*, *:before, *:after {
	box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	margin: 0px;
	padding: 0px;
}

body {
    padding: 15px;
    background-color: #222222;
}

#toolbar {
    float: left;
    margin-top: 130px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    box-shadow: 0px 0px 0px 1px rgba(0,0,0, 0.3);
}

button {
    outline: 0px;
    float: left;
    width: 42px;
    height: 36px;
    background: #494949; /* Old browsers */
    background: -moz-linear-gradient(top,  #494949 0%, #333333 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#494949), color-stop(100%,#333333)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #494949 0%,#333333 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #494949 0%,#333333 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #494949 0%,#333333 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #494949 0%,#333333 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#494949', endColorstr='#333333',GradientType=0 ); /* IE6-9 */
    background-clip: border-box;
    border-top: 1px solid rgba(255,255,255, 0.3);
    border-left: 1px solid rgba(255,255,255, 0.05);
    border-bottom: 1px solid rgba(0,0,0, 0.4);
    border-right: 1px solid rgba(0,0,0, 0.2);
    color: #000;
    text-shadow: 0px 1px 0px rgba(255,255,255, 0.2);
}
button:hover, button:focus {
    background: #535353; /* Old browsers */
    background: -moz-linear-gradient(top,  #535353 0%, #3d3d3d 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#535353), color-stop(100%,#3d3d3d)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #535353 0%,#3d3d3d 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #535353 0%,#3d3d3d...

JavaScript

$(document).ready(function(){

    $("button").mousedown(function() {
        $(this).addClass("down");
    }).mouseup(function() {
        $(this).removeClass("down");
    }).mouseout(function() {
        $(this).removeClass("down");
    });
    
});