JSFiddle - React, Tailwind, and code Playground

by maxious

HTML

<a href="#" class="b-button"><i class="b-button__icon b-button__icon_type_buy"></i><span class="b-button__text">Buy</span></a>
<a href="#" class="b-button"><i class="b-button__icon b-button__icon_type_search"></i><span class="b-button__text">Search</span></a>
<a href="#" class="b-button"><i class="b-button__icon b-button__icon_type_login"></i><span class="b-button__text">Log in</span></a>
<a href="#" class="b-button"><span class="b-button__text">BID</span></a>
<a href="#" class="b-button"><span class="b-button__text">+ Add to favorites</span></a>
<a href="#" class="b-button"><i class="b-button__icon b-button__icon_type_search"></i></a>
<a href="#" class="b-button"><i class="b-button__icon b-button__icon_type_yes"></i></a>
<a href="#" class="b-button"><i class="b-button__icon b-button__icon_type_no"></i></a>
<a href="#" class="b-button"><i class="b-button__icon b-button__icon_type_go"></i></a>

CSS

.b-button:link, 
.b-button:active, 
.b-button:visited, 
.b-button:hover {
    display: inline-block;
    position: relative;
    height: 18px;
    margin: 0;
    padding: 0;
    border: 1px solid #6e9800;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAATCAIAAACiD+yXAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAClSURBVHjaYlx6Q5FheAGAAGL5+/f/MPMSQACx/P0zzHzEABBALP+GXSwBBNAwjCWAAGL583u4xRJAAAFjabh5CSCAhmHCAwigYZjwAAIIWOINt1gCCKBhmJcAAmgYegkggIANouGW8AACaBjGEkAADcPiASCAhmEbDyCAWP7++8/IwDhs/POf4T9AALF8/PyScfj4iOH/fwaAAGK59mC45SWAAAMAeTgz+dpdLyUAAAAASUVORK5CYII=") repeat-x;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #fff;
    line-height: 18px;
    text-decoration: none;
    white-space: nowrap;
    zoom: 1;
    min-width: 18px;
    vertical-align: top;
}

.b-button__icon {
    display: inline-block;
    float: left;
    top: 0;
    left: 0;
    background-image: url( "http://jira.webmercs.com/secure/attachment/17699/17699_ico-buttons11_3.png" );
    background-repeat: no-repeat;
    width: 18px;
    height: 18px;
}
.b-button__icon_type_search {
    background-position: 0 0;
}
.b-button__icon_type_buy {
    background-position: -50px 0;
    width: 19px;
}
.b-button__icon_type_login {
    background-position: -100px 0;
}
.b-button__icon_type_yes {
    background-position: -150px 0;
}
.b-button__icon_type_no {
    background-position: -200px 0;
}
.b-button__icon_type_go {
    background-position: -250px 0;
}

.b-button__text {
    display: inline-block;
    min-width: 30px;
    text-align: center;
    margin: 0 6px 0 6px;
}