JSFiddle - React, Tailwind, and code Playground

by Juan Carlos Oropeza Gonzalez

HTML

<input class="cookie" id="iEnabled" type="submit" value="Enabled">
<input class="cookie" id="iDisabled" type="submit" value="Disabled" disabled>
<br>
    
<input class="btn" id="btnEnabled" type="submit" value="Enabled" >
    
<input class="btn" id="btnDisabled" type="submit" value="Disabled" disabled>
    
<div class="btn" id="buttonA"  style=" height: 30px;line-height: 30px; text-align: center;" disabled>Disabled
</div>

CSS

.cookie:hover {
    cursor: pointer;
}
.cookie:hover:disabled {
    cursor: no-drop;
}

.btn {
    z-index: 311;
    width: 99px;
    border-color: 2px #787878;
    background-color: #CACACA;    
    margin-left: 76px;
    margin-top: 21px;
    position: relative;
    border-radius: 26px;
    -moz-border-radius: 26px;
    -webkit-border-radius: 26px;
    cursor: pointer;
}
.btn:hover:enabled {
    background-color: #969696;
    margin: 21px 0px 0px 76px;
    cursor: pointer;
}
.btn:hover:disabled {
    background: red;
    cursor: no-drop;
}