JSFiddle - React, Tailwind, and code Playground

HTML

<h3>&lt;button> and &lt;input>:</h3>
<input type="button" value="Register"><br>
<input type="button" disabled value="Register">

<h3>Links &lt;a href="#">:</h3>
<a href="#">Can't touch this!</a>

SCSS

/*SCSS*/
input[type=button] { background-image:linear-gradient(orange, darken(orange,10%)); box-shadow:1px 1px 2px rgba(black,.3); }
input[type=button][disabled] { background: #aaa; box-shadow:inset -1px -1px 1px rgba(white,.2); text-shadow:0 -1px 0 rgba(white,.2); }

a { pointer-events:none; }

/*Styling stuff not needed for demo*/
input[type=button] { padding: 10px 15px; border:2px solid rgba(black,.3); font-size: 22px; border-radius: 2px; 
    &:last-of-type { margin-top: 10px; }
}
body { font: 14px Arial; }