JSFiddle - React, Tailwind, and code Playground

HTML

<div style="background:#282828;width:100%;height:40px;padding:5px 0">
    <div class="but">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
</div>

CSS

.but {
    height: 30px;
    color: #f0f0f0;
    display: inline;
    border-top: 1px solid rgba(255,255,255,0.2);
    border-right: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(0,0,0,0.3);
    border-left: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
    border-radius: 3px;
    /*-webkit-transition: all 0.2s linear;*/
}

JavaScript

$(".but").mousedown(function() { //change button styles on mouse down
        var $el = $(this); // keep a reference for later
            
        $el.css({
            "border-top": "1px solid rgba(0,0,0,0.3)",
            "border-right": "1px solid rgba(0,0,0,0.1)",
            "border-bottom": "1px solid rgba(255,255,255,0.2)",
            "border-left": "1px solid rgba(0,0,0,0.1)",
            "box-shadow": "inset 0 2px 10px 0 rgba(0,0,0,0.5)",
            "background": "rgba(0,0,0,0.1)",
            "text-decoration": "none"
        });
        $('body').one('mouseup', function() { //revert back on the next mouse up only, wherever that mouseup takes place
            $el.css({
                "border-top": "1px solid rgba(255,255,255,0.2)",
                "border-right": "1px solid rgba(255,255,255,0.1)",
                "border-bottom": "1px solid rgba(0,0,0,0.3)",
                "border-left": "1px solid rgba(255,255,255,0.1)",
                "box-shadow": "0 0 0 1px rgba(0,0,0,0.3)",
                "background": "none",
                "text-decoration": "none"
            });
        });
    });