CSS Selection Buttons

by markallgood

HTML

<div class="selection-buttons">
    <div class="selection-button">Option 1</div>
    <div class="selection-button selected">Option 2</div>
    <div class="selection-button">Option 3</div>
</div>

<table class="selection-buttons">
    <tr>
        <td class="selection-button">Option 1</td>
        <td class="selection-button">Option 2</td>
        <td class="selection-button">Option 3</td>
    </tr>
</table>

CSS

@font-face {
    font-family: 'SignifyLite';
    src: url('signifylite-webfont.eot');
    src: url('signifylite-webfont.eot?#iefix') format('embedded-opentype'),
         url('signifylite-webfont.woff') format('woff'),
         url('signifylite-webfont.ttf') format('truetype'),
         url('signifylite-webfont.svg#SignifyLite') format('svg');
    font-style: normal;
}

.selection-button {
    font-family: 'SignifyLite'; 
    font-weight: 100; 
    font-size: 16px; 
    margin: 0px 0px 0px 0px;
    padding: 0px 10px;
    line-height: 26px; 
    height: 32px; 
    display: inline-block;
    float: left;
    border-right: 1px solid rgba(0,0,0,0.2);
    color: #fff;
    background: #44474a; /* Old browsers */
    background: -moz-linear-gradient(top, #66696d 0%, #5f6266 2%, #3d4145 50%, #2a2d2e 54%, #2c2d2e 75%, #2a292b 94%, #353536 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#66696d), color-stop(2%,#5f6266), color-stop(50%,#3d4145), color-stop(54%,#2a2d2e), color-stop(75%,#2c2d2e), color-stop(94%,#2a292b), color-stop(100%,#353536)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #66696d 0%,#5f6266 2%,#3d4145 50%,#2a2d2e 54%,#2c2d2e 75%,#2a292b 94%,#353536 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #66696d 0%,#5f6266 2%,#3d4145 50%,#2a2d2e 54%,#2c2d2e 75%,#2a292b 94%,#353536 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #66696d 0%,#5f6266 2%,#3d4145 50%,#2a2d2e 54%,#2c2d2e 75%,#2a292b 94%,#353536 100%); /* IE10+ */
    background: linear-gradient(top, #66696d 0%,#5f6266 2%,#3d4145 50%,#2a2d2e 54%,#2c2d2e 75%,#2a292b 94%,#353536 100%); /* W3C */
}

.selection-button:last-child {
    border-right: none;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
}

.selection-button:first-child {
    border-right: none;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}


/* BLACK BUTTON*/

.selection-buttons{
   ...