Android Buttons

by James Doyle

HTML

<button class="default light">Normal</button>
<button class="default dark">Normal</button>

CSS

body {
    margin: 20px;
    background: black;
}

button.default {
    width: 9em;
    height: 2.2em;
    margin: 0 2px;
    font-size: 18px;
    font-family: 'Roboto';
    outline: none;
    border-radius: 2px;
}
button.default.light {
    color: #333;
    background: #cecece;
    box-shadow: 0 1px 1px rgba(0,0,0,0.25), 0 0 1px 1px rgba(206,206,206,0.5);
    border: 1px solid white;
    border-top-color: #dfdfdf;
    border-right-color: #c8c8c8;
    border-bottom-color: #979797;
    border-left-color: #c8c8c8;
}
button.default.light:focus {
    background: #a6daed;
    box-shadow: 0 -1px 1px #59bbdc, 0 1px 1px #2b98bc, 0 2px 1px rgba(0,0,0,0.4), 0 0 1px 1px rgba(206,206,206,0.5);
    border: 1px solid #30abd4;
}
button.default.light:active {
    background: #59c1e8;
    box-shadow: 0 -1px 1px #85d2ee, 0 1px 1px #4597b5, 0 0 2px 5px #a6daed;
    border: 1px solid #59c1e8;
}


button.default.dark {
    color: #fff;
    background: #474747;
    box-shadow: none;
    border: 1px solid white;
    border-top-color: #858585;
    border-right-color: #424242;
    border-bottom-color: #343434;
    border-left-color: #424242;
}
button.default.dark:focus {
    background: #1f5366;
    box-shadow: 0 -1px 1px #3497b8, 0 1px 1px #037094;
    border: 1px solid #037ea7;
}
button.default.dark:active {
    background: #2c94bb;
    box-shadow: 0 0 2px 5px #1f5366;
    border: 1px solid 2c94bb;
    border-top-color: #64b1cd;
    border-right-color: #2a8cb1;
    border-bottom-color: #227392;
    border-left-color: #2a8cb1;
}