Buttons

by justjohn

HTML

<section class="panel">
    <header><h2>Section</h2></header>
    
    <div class="bottom">
        <div class="inset-button">
            <button class="gray">Save</button>
            <button class="black">Cancel</button>
        </div>
    </div>
</section>
<section class="workspace">

</section>

SCSS

@import url(http://fonts.googleapis.com/css?family=Exo:200,300,400,500,600,700);

section.workspace {
    position: absolute;
    left: 250px;
    right: 0;
    top:0;
    bottom:0;
    
    background-color:#222;
    background-image:
        -webkit-linear-gradient(rgba(255,255,255,.2) 2px, transparent 2px),
        -webkit-linear-gradient(0, rgba(255,255,255,.2) 2px, transparent 2px),
        -webkit-linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
        -webkit-linear-gradient(0, rgba(255,255,255,.1) 1px, transparent 1px);
    background-image:
        -moz-linear-gradient(rgba(255,255,255,.2) 2px, transparent 2px),
        -moz-linear-gradient(0, rgba(255,255,255,.2) 2px, transparent 2px),
        -moz-linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
        -moz-linear-gradient(0, rgba(255,255,255,.1) 1px, transparent 1px);
    background-image:
        linear-gradient(rgba(255,255,255,.2) 2px, transparent 2px),
        linear-gradient(0, rgba(255,255,255,.2) 2px, transparent 2px),
        linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
        linear-gradient(0, rgba(255,255,255,.1) 1px, transparent 1px);
    background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px
        
    -webkit-box-shadow: inset 0 0 5px 4px #000;
    -moz-box-shadow: inset 0 0 5px 4px #000;
    box-shadow: inset 0 0 5px 4px #000; 
}

section.panel {
    position: absolute;
    width: 250px;
    top:0;
    bottom:0;
    
    border-right: 2px solid #777;
    
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eee), color-stop(100%, #ddd));
    background-image: -webkit-linear-gradient(top, #eee, #ddd);
    background-image: -moz-linear-gradient(top, #eee, #ddd);
    background-image: -ms-linear-gradient(top, #eee, #ddd);
    background-image: -o-linear-gradient(top, #eee, #ddd);
    background-image: linear-gradient(top, #eee, #ddd);
    
 ...