<button>Show Alert</button>
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

button {
  font-size: 1.2rem;
  color: #fff;
  background-color: #8a2be2;
  border: none;
  border-radius: 15px;
  padding: 10px;
  cursor: pointer;
  display: block;
  margin: 10px auto;
}

button:hover {
  background-color: #5a1d94;
}
const buttonElement = document.querySelector("button");

console.log(buttonElement);

buttonElement.addEventListener("click", () => {
  alert("Button was clicked!");
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.