JSFiddle - React, Tailwind, and code Playground

by Tenderfeel

HTML

<span class="button blue sprite">Button1</span>
<span class="sprite2 button2">Button2</span>

CSS

span {
    width:200px;
    display: block;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  background: transparent;
  color: #0066cc;
  text-decoration: none;
}

.button {
  position: relative;
  color: #333;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

.sprite {
  color: rgba(0, 0, 0, 0) !important;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: url("http://jsfiddle.net/img/logo.png");
}

.button.white, .button.green, .button.lgray, .button.gray, .button.red, .button.blue, .button.orange, .button.mgray {
  border: solid 3px white;
  padding: 5px 10px;
  text-align: center;
  font-weight: bold;
  text-decoration: inherit;
  color: inherit;
  height: 36px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

.button.blue {
  border-color: #3D668F;
  background-color: #3D668F;
  color: #666;
}

.button.sprite {
    background-position:5px center;
}