<button id="play" class="action-btn action-btn-big" data-type="play">
<i class="icon"></i> Button
</button>
body {
padding: 2rem;
}
.action-btn {
width: 10em;
height: 3em;
display: flex;
align-items: center;
}
.icon {
width: 2em;
background: red;
flex-shrink: 0;
height: 2em;
}
View Compiled
document.addEventListener("click", (e) => {
if (e.target.closest("[data-type=play]")) {
alert("Click on button");
}
});
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.