JSFiddle - React, Tailwind, and code Playground

by elias94xx

HTML

<span class="button">Button</span>

CSS

body { background-color: #E0E0E0; }

.button {
    color: rgba(0, 0, 0, 0.8);
    font-weight: bold;
    text-shadow: 0px 1px rgba(255, 255, 255, 0.5);
    display: inline-block;
    
    margin: 20px;
    padding: 5px 10px;
    border-radius: 3px;
    border: 1px solid #666;
    
    box-shadow: inset 0px 1px rgba(255, 255, 255, 0.8),
    0px 2px rgba(255, 255, 255, 0.7), 0px -1px rgba(0, 0, 0, 0.1);
    

    -webkit-user-select: none;
    cursor: pointer;
}

.button:hover{ background-image: -webkit-linear-gradient(top, #DF0, #AE0); }
.button:active { background-image: -webkit-linear-gradient(top, #AD0, #9C0); }

JavaScript

var hue = 0;
var lighting = 50;

window.setInterval(function() {
    $(".button").css("background-image",
    "-webkit-linear-gradient(top, hsl(" +
    hue + ", 50%, " + (lighting+15) + "%), hsl(" +
    hue + ", 50%, " + lighting  + "%))");
    
    hue++;
}, 30);