<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');
function reset () {
window.setTimeout(() => {
button.innerText = '"click" me';
}, 2000);
}
button.addEventListener('mouseup', (e) => {
if (e.button === 0) {
button.innerText = 'MouseUp Event!';
reset();
}
});
button.addEventListener('keyup', (e) => {
if (e.code === 'Space' || e.code === 'Enter') {
button.innerText = `KeyUp Event: ${e.code}`;
reset();
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.