JSFiddle - React, Tailwind, and code Playground

by zzzzBov

HTML

<input type="button" value="test"/>

CSS

input {
    background-color: #DDD;
    border: 1px solid #CCC;
    outline: 0;
    padding: 10px 20px;
}
input:hover {
    border-bottom-width: 2px;
    padding-bottom: 9px;
}
input[data-key="1"] {
    border-bottom-width: 1px;
    box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.3);
    padding-bottom: 10px;
}
input[data-key="2"] {
    border-bottom-width: 1px;
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.3);
    padding-bottom: 10px;
}
input[data-key="3"] {
    border-bottom-width: 1px;
    box-shadow: inset -1px 2px 4px rgba(0, 0, 0, 0.3);
    padding-bottom: 10px;
}

JavaScript

$('[type="button"]').on('mousedown', function (e) {
    e.preventDefault();
    $(this).attr('data-key', e.which);
}).on('contextmenu', function (e) {
    e.preventDefault();
});
$(window).on('mouseup', function (e) {
    if (+$('[data-key]').attr('data-key') === e.which) {
        $('[data-key]').attr('data-key', '');
    }
});