happier-button-js.js

        // Style
        var styleNode = document.createElement("style");
        styleNode.type = "text/css";
        // browser detection (based on prototype.js)
        var style = "a:hover,button{background-color:#fff;color:#000}button{font-family:Comfortaa,sans-serif;border:2px solid #ecf0f1;border-radius:10px;font-size:20px;-webkit-transition:all .25s linear 0s;-o-transition:all .25s linear 0s;transition:all .25s linear 0s;-webkit-box-shadow:2px 2px 4px rgba(0,0,0,.4);box-shadow:2px 2px 4px rgba(0,0,0,.4);padding:.2em;position:relative;overflow:hidden}button:hover{border:2px solid #2c3e50;-webkit-box-shadow:4px 4px 6px #2c3e50;box-shadow:4px 4px 6px #2c3e50;cursor:pointer;-webkit-transform:translateY(-2px);-ms-transform:translateY(-2px);transform:translateY(-2px)}a{color:#2c3e50}a:hover{border-radius:5px}.danger,.guide,.info,.normal,.success,.warning{color:#fff}button:after{content:'';position:absolute;top:50%;left:50%;width:5px;height:5px;background:rgba(255,255,255,.5);opacity:0;border-radius:50%;-webkit-transform:scale(1,1) translate(-70%);-ms-transform:scale(1,1) translate(-70%);transform:scale(1,1) translate(-70%);-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%}@-webkit-keyframes ripple{0%{-webkit-transform:scale(0,0);transform:scale(0,0);opacity:1}20%{-webkit-transform:scale(25,25);transform:scale(25,25);opacity:1}100%{opacity:0;-webkit-transform:scale(40,40);transform:scale(40,40)}}@keyframes ripple{0%{-webkit-transform:scale(0,0);transform:scale(0,0);opacity:1}20%{-webkit-transform:scale(25,25);transform:scale(25,25);opacity:1}100%{opacity:0;-webkit-transform:scale(40,40);transform:scale(40,40)}}button:focus:not(:active)::after{-webkit-animation:ripple .75s ease-out;animation:ripple .75s ease-out}button:focus{outline:0}button:active{-webkit-transform:translateY(4px) scale(.9,.9);-ms-transform:translateY(4px) scale(.9,.9);transform:translateY(4px) scale(.9,.9)}.normal{background:#34495e;-webkit-box-shadow:2px 2px 4px #2c3e50;box-shadow:2px 2px 4px #2c3e50}.danger:hover,.guide:hover,.info:hover,.normal:hover,.success:hover,.warning:hover{border:2px solid #ecf0f1}.danger{background:#e74c3c;-webkit-box-shadow:2px 2px 4px #f08080;box-shadow:2px 2px 4px #f08080}.success{background:#27ae60;-webkit-box-shadow:2px 2px 4px #2ecc71;box-shadow:2px 2px 4px #2ecc71}.info{background:#3498db;-webkit-box-shadow:2px 2px 4px #2980b9;box-shadow:2px 2px 4px #2980b9}.warning{background:#f39c12;-webkit-box-shadow:2px 2px 4px #f39c12;box-shadow:2px 2px 4px #f39c12}.guide{background:#9b59b6;-webkit-box-shadow:2px 2px 4px #9b59b6;box-shadow:2px 2px 4px #9b59b6}.danger2,.guide2,.info2,.normal2,.success2,.warning2{background-color:#fff}.normal2{color:#34495e;-webkit-box-shadow:2px 2px 4px #2c3e50;box-shadow:2px 2px 4px #2c3e50}.normal2:hover{border:2px solid #2c3e50}.danger2{color:#e74c3c;-webkit-box-shadow:2px 2px 4px #f08080;box-shadow:2px 2px 4px #f08080}.danger2:hover{border:2px solid #f08080}.success2{color:#27ae60;-webkit-box-shadow:2px 2px 4px #2ecc71;box-shadow:2px 2px 4px #2ecc71}.success2:hover{border:2px solid #2ecc71}.info2{color:#3498db;-webkit-box-shadow:2px 2px 4px #2980b9;box-shadow:2px 2px 4px #2980b9}.info2:hover{border:2px solid #2980b9}.warning2{color:#f39c12;-webkit-box-shadow:2px 2px 4px #f39c12;box-shadow:2px 2px 4px #f39c12}.warning2:hover{border:2px solid #f39c12}.guide2{color:#9b59b6;-webkit-box-shadow:2px 2px 4px #9b59b6;box-shadow:2px 2px 4px #9b59b6}.guide2:hover{border:2px solid #9b59b6}@media screen and (max-width:900px){button{margin:.2em}}";
        if (!!(window.attachEvent && !window.opera)) {
            styleNode.styleSheet.cssText = style;
        } else {
            var styleText = document.createTextNode(style);
            styleNode.appendChild(styleText);
        }
        document.getElementsByTagName("head")[0].appendChild(styleNode);