JSFiddle - React, Tailwind, and code Playground

by nightgremlin

HTML

<button>
  Click me
</button>

CSS

button{
  background: yellow;
  border: 0px;
  border-bottom:3px solid #000000;
  transition: all 0.2s;
  outline:none;
}

JavaScript

document.body.onmousedown = function(event) {
  var target = event.target;
    if (target.tagName != 'BUTTON') return; // Если нажали не на кнопку, то ничего не происходит

    target.style.borderBottomWidth = 1 + 'px'; // Например, поменяем размер нижней границы
    document.body.onmouseup = function() {
    target.style.borderBottomWidth = 3 + 'px'
    }
};