Edit in JSFiddle

<div id="container">
    <p>
        <a href="#" class="button">Button</a>
        <a href="#" class="button red">Button</a>
        <a href="#" class="button green">Button</a>
        <a href="#" class="button blue">Button</a>
        <a href="#" class="button yellow">Button</a>
        <a href="#" class="button orange">Button</a>
    </p>
    <p>
        <a href="#" class="button small">Small Button</a>
        <a href="#" class="button small red">Small Button</a>
        <a href="#" class="button small green">Small Button</a>
        <a href="#" class="button small blue">Small Button</a>
        <a href="#" class="button small yellow">Small Button</a>
        <a href="#" class="button small orange">Small Button</a>
    </p>
    <p style="margin-top:1.5em">
        <a href="#" class="button large">Large Button</a>
        <a href="#" class="button large red">Large Button</a>
        <a href="#" class="button large green">Large Button</a>
        <a href="#" class="button large blue">Large Button</a>
        <a href="#" class="button large yellow">Large Button</a>
        <a href="#" class="button large orange">Large Button</a>
    </p>
    <p style="margin-top:2em">
    </p>
    <p>
        <button class="button small">Submit</button>
        <button class="button">Submit</button>
        <input type="submit" class="button large" value="Submit" />
    </p>
    <div id="dark">
        <p>
            <a href="#" class="button">Button</a>
            <a href="#" class="button red">Button</a>
            <a href="#" class="button green">Button</a>
            <a href="#" class="button blue">Button</a>
            <a href="#" class="button yellow">Button</a>
            <a href="#" class="button orange">Button</a>
        </p>
        <p>
            <a href="#" class="button small">Small Button</a>
            <a href="#" class="button small red">Small Button</a>
            <a href="#" class="button small green">Small Button</a>
            <a href="#" class="button small blue">Small Button</a>
            <a href="#" class="button small yellow">Small Button</a>
            <a href="#" class="button small orange">Small Button</a>
        </p>
        <p style="margin-top:1.5em">
            <a href="#" class="button large">Large Button</a>
            <a href="#" class="button large red">Large Button</a>
            <a href="#" class="button large green">Large Button</a>
            <a href="#" class="button large blue">Large Button</a>
            <a href="#" class="button large yellow">Large Button</a>
            <a href="#" class="button large orange">Large Button</a>
        </p>
    </div>
</div>

body { font: 100%/1.5 Helvetica, Arial, sans-serif }

p { margin-bottom: 1em }

#container {
    width: 900px;
    margin: 0 auto;
}

#dark {
    padding: 1em;
    background: #333;
}

/* ===[ Buttons ]=== */

.button {
    position: relative;
    cursor: pointer;
    font: bold 12px/normal 'Segoe UI', Arial, sans-serif;
    color: #333;
    text-decoration: none;
    text-shadow: 1px 1px rgba(255,255,255,0.5);
    border: 1px solid rgba(0,0,0,.1);
    padding: 5px 10px 6px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #EEE;
    background-image: -moz-linear-gradient(rgba(255,255,255,0.2), rgba(0,0,0,0.2));
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,0.2)), color-stop(100%, rgba(0,0,0,0.2)));
    background-image: -webkit-linear-gradient(rgba(255,255,255,0.2), rgba(0,0,0,0.2));
    background-image: -o-linear-gradient(rgba(255,255,255,0.2), rgba(0,0,0,0.2));
    background-image: linear-gradient(rgba(255,255,255,0.2), rgba(0,0,0,0.2));
    -webkit-box-shadow: inset 0px 1px rgba(255,255,255,0.6), 0px 0px 3px 0px rgba(0,0,0,.2);
    -moz-box-shadow: inset 0px 1px rgba(255,255,255,0.6), 0px 0px 3px 0px rgba(0,0,0,.2);
    box-shadow: inset 0px 1px rgba(255,255,255,0.6), 0px 0px 4px 0px rgba(0,0,0,.2);
    -webkit-user-select: none;
    -moz-user-select: none;
}

.button::-moz-focus-inner {
    margin: 0;
    padding: 0;
    border: 0;
}

a.button { outline: 0 }

/* ===[ Default hover ]=== */

.button:hover, .button:active {
    text-decoration: none;
    background-color: #F9F9F9;
}

/* ===[ Default active ]=== */

.button:active {
    top: 1px;
    margin-bottom: 1px;
    border-bottom-width: 1px;
    background-color: #F9F9F9;
    background-image: -moz-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.2));
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0.2)), color-stop(100%, rgba(255,255,255,0.2)));
    background-image: -webkit-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.2));
    background-image: -o-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.2));
    background-image: linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.2));
}

/* ===[ Button sizes ]=== */

.button.small {
    padding: 3px 8px 4px;
    font-size: 10px;
}

.button.large {
    padding: 10px 20px 11px;
    font-size: 14px;
}

/* ===[ Button colors ]=== */

.button.red, .button.green, .button.blue, .button.yellow, .button.orange {
    color: #FFF;
    text-shadow: 0 -1px rgba(0,0,0,0.15);
}

.button.red { background-color: #E62727 }

.button.red:hover, .button.red:active { background-color: #FF2F2F }

.button.green { background-color: #91BD09 }

.button.green:hover, .button.green:active { background-color: #A0CF0C }

.button.blue { background-color: #2981E4 }

.button.blue:hover, .button.blue:active { background-color: #2F93FF }

.button.yellow { background-color: #FFB515 }

.button.yellow:hover, .button.yellow:active { background-color: #FFC74F }

.button.orange { background-color: #FF5C00 }

.button.orange:hover, .button.orange:active { background-color: #FF782F }