JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
<head>
    <title>Compass Magick Tutorial - Part 2</title>
</head>
<body>
    <a href=#>I am a Button!</a>
</body>
</html>

CSS

.button-sprite, a, a:hover, a:active {
  background: url('http://i.imgur.com/jg8Ao.png') no-repeat;
}

a {
  display: block;
  width: 280px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-position: 0 -64px;
}
a:hover {
  background-position: 0 -32px;
}
a:active {
  background-position: 0 0;
}