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