JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jsfiddle.net/46XMq/"></script>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/pure-min.css">
<button class="pure-button" onclick="record(); return false" id="idRec">Rec</button>

CSS

#idRec.recBtn {
-webkit-box-shadow: 0px 1px 3px rgba(255,000,000,0.1),inset 0px 0px 2px rgba(255,0,0,0.7);
background: -webkit-gradient(linear, left top, left bottom, from(#ff0000),to(#ff0000));
-webkit-animation-name: buttonPulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}

@-webkit-keyframes buttonPulse {
0% {
    opacity: 0.5;
}

50% {
    opacity: 1;
}

100% {
    opacity: 0.5;
 }
}

JavaScript

record = function(){
    var elem = document.getElementById("idRec").classList.toggle('recBtn');
}