CSS Buttons

by Takeru Suzuki

HTML

<button class="default">Default</button>
<button class="submit">Submit</button>
<button class="delete">Delete</button>
<button class="pill">Blue Pill</button>
<button class="default large">Large</button>
<button class="default small">Small</button>
<button class="submit" disabled>Disabled</button>
<button class="submit disabled">Disabled</button>
<button class="default block">Block</button>
<div class="group">
    <button class="default">First</button>
    <button class="default">Middle</button>
    <button class="default">Last</button>
</div>
<div class="group">
    <button class="default selected">Selected</button>
    <button class="default">Enabled</button>
    <button class="default" disabled>Disabled</button>
</div>

SCSS

@mixin letterpress-dark ($alpha: 0.5) {
    text-shadow: 0 1px rgba(255, 255, 255, $alpha);
}

@mixin letterpress-light ($alpha: 0.25) {
    text-shadow: 0 -1px rgba(0, 0, 0, $alpha);
}

%button {        
    // Grayscale gradient
    background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.0%22%3E%3Cdefs%3E%3ClinearGradient%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%22100%25%22%20id%3D%22g%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22rgb%28255%2C255%2C255%29%22%20stop-opacity%3D%220.1%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22rgb%280%2C0%2C0%29%22%20stop-opacity%3D%220.1%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20fill%3D%22url%28%23g%29%22%20width%3D%22100%25%22%20height%3D%22100%25%22/%3E%3C/svg%3E");
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
    background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
    
    // Extend gradient to the outer edge of the border
    background-origin: border-box;
    
    // RGBa border
    border: 1px solid rgba(0, 0, 0, 0.1);
    
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.1) inset;
    border-radius: 0.25em;
    cursor: pointer;
    display: inline-block;
    font-size: 87.5%;
    line-height: 1.5;
    margin: 0.5em 0.5em 0 0;
    padding: 0.25em 1em;
    text-align: center;
    white-space: nowrap;
    
    &:hover,
    &:focus {
        background-image:...