JSFiddle - React, Tailwind, and code Playground

by dillydadally

HTML

<div>Click about half way between the edges of the text and the button.  You'll find some "dead space" where the :active css psuedo class still fires but the javascript doesn't (the button color doesn't change).  If you remove the position relative on the :active psuedo class, the problem goes away.</div>
<div id="btn" onclick="changeBG()">My Button</div>

CSS

#btn {
        background: rgb(0, 255, 0);
        height: 30px;
        line-height: 32px;
        text-align: center;
        cursor: pointer;
        float: left;  
        margin: 10px;
        
        /* Get rid of selecting the text */    
        -moz-user-select: -moz-none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    #btn:active {
        position: relative;
        left: 2px;
        top: 2px;
    }

JavaScript

function changeBG()
{
    if (document.getElementById('btn').style.backgroundColor  == "rgb(255, 0, 0)")
    {    
        document.getElementById('btn').style.backgroundColor = "rgb(0, 255, 0)";
    }
    else
    {
        document.getElementById('btn').style.backgroundColor = "rgb(255, 0, 0)";
    }
}