JSFiddle - React, Tailwind, and code Playground

by Ansel Santosa

HTML

<a href="/nextpage" class="xbutton"><img alt="Next step" src="/icons/tick.png" /> Next page</a>

CSS

.xbutton{
  padding:5px 10px 5px 7px; 
  line-height:17px; 
}

.xbutton {
  background: #edeeed url("images/button-background.png") top;
  border: 1px solid #c3c4ba;
  font-family: helvetica, arial, sans-serif;
  font-weight: normal;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.xbutton:link, .xbutton:visited{
  font-family: helvetica, arial, sans-serif;
  font-weight: lighter;
    font-size: 18px;
    color: #000;
    text-decoration:none;
}


.xbutton:active {
  background: #eaeaea url("images/button-background-active.png") top;
  outline: none;
  margin-top: 1px;
  margin-bottom: -1px;
}