Creating a Delete Button Animation with HTML, CSS, and Javascript #HTML #CSS #Javascript #animation

.delete-button {
background-color: #ff6347;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.delete-button:hover {
background-color: #d9534f;
}
.delete-icon {
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
.delete-text {
display: inline-block;
vertical-align: middle;
}

Delete Button Animation

Click the delete button to see the animation:

Delete

function deleteItem() {
// Add animation here
document.querySelector(‘.delete-button’).classList.add(‘deleting’);
setTimeout(function() {
// Add logic to delete item here
alert(‘Item deleted’);
// Reset button
document.querySelector(‘.delete-button’).classList.remove(‘deleting’);
}, 1000);
}