CSS Buttons 2

by Takeru Suzuki

HTML

<button class="default">Default</button>
<button class="submit">Submit</button>
<button class="delete">Delete</button>
<button class="default" disabled>Default</button>
<button class="submit" disabled>Submit</button>
<button class="delete" disabled>Delete</button>
<button class="pill">Blue Pill</button>
<button class="default large">Large</button>
<button class="default small">Small</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" aria-pressed="true">Selected</button>
    <button class="default">Default</button>
    <button class="default" disabled>Disabled</button>
</div>

SCSS

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

$box-shadow-default: inset 0 1px rgba(255, 255, 255, 0.1);
$box-shadow-focus: 0 0 0.25em 1px rgb(0, 128, 255);
$box-shadow-active: inset 0 0 0.25em rgba(0, 0, 0, 0.1);
$box-shadow-disabled: none;

@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: -webkit-linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.05));
    background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.05));
    
    // 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: $box-shadow-default;
    border-radius: 0.25em;
    // cursor: pointer;
    display: inline-block;
    height: 2.5em;
    font-size: 87.5%;
    line-height: normal;
    margin: 0.5em 0.5em 0 0;
    padding: 0 1.5em;
    text-align: center;
    white-space: nowrap;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-transition: box-shadow 0.1s;
            transition: box-shadow 0.1s;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
    
    &:hover,
    /* &:focus, */
    &[aria-pressed="true"] {
        background-image: -webkit-linear-gradient(rgba(128, 128, 128, 0.1), rgba(0, 0, 0, 0.1));
        background-image: linear-gradient(rgba(128, 128, 128, 0.1), rgba(0, 0, 0, 0.1));
    }

    &:focus {
        box-shadow: $box-shadow-default, $box-shadow-focus;
        outline: none;
    }

    &:active,
    &[aria-pressed="true"] {
        border-color: rgba(0,0,0,0.15);
        box-shadow: $box-shadow-active;
        &:focus {
            box-shadow: $box-shadow-active, $box-shadow-focus;
    ...