<button id="button">"click" me</button>

@import url('https://fonts.googleapis.com/css?family=Open+Sans:700&display=swap');

html,
body {
  display: grid;
  height: 100vh;
  place-items: center;
}

#button {
  background-color: white;
  border: 3px solid rebeccapurple;
  border-radius: 7px;
  color: rebeccapurple;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  padding: 8px 16px;
}
#button:hover {
  background-color: lavender;
}
#button:active {
  background-color: rebeccapurple;
  color: white;
}
#button:focus-visible {
  box-shadow: 0 0 0 2px white, 0 0 0 5px rebeccapurple;
  outline: none;
}

const button = document.querySelector('#button');

button.addEventListener('click', (e) => {
  button.innerText = e.detail === 0 ? 'Keyboard Click Event!' : 'Mouse Click Event!';
  
  window.setTimeout(() => {
    button.innerText = '"click" me';
  }, 2000);
});