panel of buttons

by Exceeder

HTML

<div class="panel">
    <div>
    <button>Test 1  </button>
    <button>Test 2 <span class="t-arrow_in"/></button>
    <button>Test 3 <span class="t-arrow_inout"/></button>    
    </div>    
</div>

CSS

.panel {    
    height:4em;   
    width:100%;
    background:#eee;   
    text-align:center;
}

.panel > div {    
    padding-left:1.2em;
    display:table-cell;    
    height:4em;   
    vertical-align:middle;
}

button {
    padding:0.5em;
    display:inline-block;
    height:2.5em;
    vertical-align:middle;
    font: 12px/1 Arial, sans-serif;
}

span {
    display:inline-block;
    position:relative;
    width:16px; height:16px;
    vertical-align:middle;
}

.t-arrow_in {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHySURBVDjLtZPvT1JxFMb5O/gHskVzrrV+mFZomDdEDGkYKSXlRleY6IzcFdQ7lBgYeaELBNjFEpbWi9psRU7JnCa3VYTV/WfY01davkFk0/XivDp7Ps/Zc86RAZAdpmT/BWDLmun+5ZuS5X0P+paMML82SKZXeroqYGDttty22it6Po8iWeCxIAlI/5pF9Osj3M8MwPCsXex8ekVeEWAlYn+OxaKUxNx2FKmfcTzfjiH2ncNsnsfIOzu00RZxT4B1pZee3GTw4vdfVyEfxkTWAdfyMMJfHiL2LYgImcSyeAstgQt0GeBuxiQl8iEIP/iSW/eCrtiV0rLXkm3s1ThVnN6cQkj0w511osl7TioD9L29QcaNY64QhWvlHrrmtey/niasclCcEqrp81B669HoPo0yAEmaBBcpuTOZQegF9S6gdUaJqms0vdRL3JYXQdEHLueD9snlovpxc2qnd8nfiIues9gXYEx30INLFvAksB1IIPcAd9LdaPY1oEcw4HqiE2ecJ7DvHegSlGh/Y0FgywP3uhPeDRae9TG4P7nArjHQ8W2oG1KgIkATUcmpYJNonjeC+TCMyZJwFOMfR+BadaCdo3DcdhRVT5kkTZOkC/VjJ3GKqUNHSA3NTCsR1+BAz1RrPwaFtQYH/kZF/5GKa/wDDtK86rC6fMkAAAAASUVORK5CYII=") bottom left no-repeat;}

.t-arrow_inout...