<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);
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.