JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<button class="example" type="button">
 <span id="floatme2">test</span></button>

CSS

button{position:relative;font-size:1.5em;font-weight:700;margin:5px 20px;height:50px;min-width:50px;border:none;background:transparent url('http://img841.imageshack.us/img841/3165/btng.png') repeat-x 0 -100px;}
button > span{padding:0 20px;color:#444;text-shadow:1px 1px 0 #ffdaa0;font-family:arial,sans-serif;}
button > span:before{content:'';position:absolute;top:0;left:-10px;height:50px;width:10px;background:transparent url('http://img841.imageshack.us/img841/3165/btng.png') no-repeat 0 0;}
button > span:after{content:'';position:absolute;top:0;right:-10px;height:50px;width:10px;background:transparent url('http://img841.imageshack.us/img841/3165/btng.png') no-repeat 0 -50px;}
button:hover,button:active{background-position-y:-250px;}
button:hover > span:before,button:active > span:before{background-position-y:-150px;}
button:hover > span:after,button:active > span:after{background-position-y:-200px;}


@-moz-document url-prefix() {
button > span {float:left; width:50px; height:50px; margin:0; text-align:center; display:block; line-height:50px; }

button{margin:5px 20px; height:50px; border:0; min-width:50px; padding:0; font-size:1.5em; font-weight:700; border:none; background:transparent url('http://img841.imageshack.us/img841/3165/btng.png') repeat-x 0 -100px;}
button:before,button:after{width:10px; content:"\a0"; height:50px; background-image:url("http://img841.imageshack.us/img841/3165/btng.png"); background-repeat:no-repeat;}
button:before{float:left; margin-left:-10px; background-position: 0 0; }
button:after{float:right; margin-right:-10px; background-position: 0 -50px;}

}