<h1>Click the button and an alert will show up</h1>
<div class="btn-div">
  <button id="btn">Show alert</button>
</div>
h1 {
  text-align: center;
}

/*Centers the button*/
.btn-div {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*Button styles*/
#btn {
  border: none;
  padding: 10px;
  font-size: 1.3rem;
  background-color: #003366;
  color: white;
  border-radius: 15%;
  cursor: pointer;
}
const button = document.getElementById("btn");

button.addEventListener("click", () => {
  alert("Thank you for clicking me");
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.