<div id="buttons">
<button class="js-add">Add</button>
<button class="js-edit">Edit</button>
<button class="js-delete">Delete</button>
</div>
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
}
button {
appearance: none;
backface-visibility: hidden;
background-color: #c11c1c;;
border-radius: 10px;
border-style: none;
box-shadow: none;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: Inter,-apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 500;
height: 50px;
letter-spacing: normal;
line-height: 1.5;
outline: none;
overflow: hidden;
padding: 14px 30px;
position: relative;
text-align: center;
text-decoration: none;
transform: translate3d(0, 0, 0);
transition: all .3s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: top;
white-space: nowrap;
}
button:hover {
background-color: #f22828;
box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
opacity: 1;
transform: translateY(0);
transition-duration: .35s;
}
button:hover:after {
opacity: .5;
}
button:active {
box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
transform: translateY(2px);
transition-duration: .35s;
}
button:active:after {
opacity: 1;
}
@media (min-width: 768px) {
button {
padding: 14px 22px;
width: 176px;
}
}
const $buttons = document.getElementById("buttons");
$buttons.addEventListener("click", function(event) {
const $target = event.target;
if ($target.classList.contains("js-add")) {
alert("click add - 5");
} else if ($target.classList.contains("js-edit")) {
alert("click edit - 5");
} else if ($target.classList.contains("js-delete")) {
alert("click delete - 5");
};
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.