JSFiddle - React, Tailwind, and code Playground
HTML
<a href="#" class="btn">Button with Gradient Noise!</a>
CSS
a.btn {
background: #939393 url('http://rd2inc.com/wp-content/uploads/2013/01/bg-noise.png') left top repeat; /* ie fallback */
background: url('http://rd2inc.com/wp-content/uploads/2013/01/bg-noise.png') left top repeat,
-webkit-gradient(linear, 0 0, 0 bottom, from(#939393), to(#535353));
background: url('http://rd2inc.com/wp-content/uploads/2013/01/bg-noise.png') left top repeat,
-webkit-linear-gradient(#939393, #535353);
background: url('http://rd2inc.com/wp-content/uploads/2013/01/bg-noise.png') left top repeat,
-moz-linear-gradient(#939393, #535353);
background: url('http://rd2inc.com/wp-content/uploads/2013/01/bg-noise.png') left top repeat,
-ms-linear-gradient(#939393, #535353);
background: url('http://rd2inc.com/wp-content/uploads/2013/01/bg-noise.png') left top repeat,
-o-linear-gradient(#939393, #535353);
background: url('http://rd2inc.com/wp-content/uploads/2013/01/bg-noise.png') left top repeat,
linear-gradient(#939393, #535353);
display: block;
padding: 50px 20px;
color: #FFF;
text-transform: uppercase;
font-family: Arial, sans-serif;
text-decoration: none;
max-width: 80%;
margin: 50px auto;
}
a.btn:hover{
background: #30848B url('http://rd2inc.com/wp-content/uploads/2013/01/bg-noise.png') left top repeat; /* ie8 fallback */
background: url('http://rd2inc.com/wp-content/uploads/2013/01/bg-noise.png') left top repeat,
-webkit-gradient(linear, 0 0, 0 bottom, from(#30848B), to(#234067));
background: url('http://rd2inc.com/wp-content/uploads/2013/01/bg-noise.png') left top repeat,
-webkit-linear-gradient(#30848B, #234067);
background: url('http://rd2inc.com/wp-content/uploads/2013/01/bg-noise.png') left top repeat,
-moz-linear-gradient(#30848B, #234067);
background: url('http://rd2inc.com/wp-content/uploads/2013/01/bg-noise.png') left top repeat,
-ms-linear-gradient(#30848B,...