Back
Learn how to build an intuitive delete button that expands to reveal a confirmation prompt, enhancing user experience and preventing accidental deletions.
<button class="delete-btn">
<span class="delete-text">CONFIRM DELETE</span>
<svg class="delete-icon" xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
.delete-btn {
position: relative;
width: 50px;
height: 50px;
border-radius: 25px;
border: 2px solid rgb(231, 50, 50);
background-color: #fff;
cursor: pointer;
box-shadow: 0 0 10px #333;
overflow: hidden;
transition: 0.3s;
}
On hover, we provide subtle visual feedback to indicate interactivity. The background transitions to a soft pink (#f5cfcf), and the button scales up slightly (1.2×) to create a sense of prominence.
Simultaneously, we reduce the box-shadow intensity to create the illusion of the button moving slightly toward the user, enhancing the three-dimensional effect.
.delete-btn:hover {
background-color: rgb(245, 207, 207);
transform: scale(1.2);
box-shadow: 0 0 4px #111;
transition: 0.3s;
}
For the delete icon, we maintain consistent branding by using the same red color as the button border. We position it precisely in the center of the circular button using absolute positioning with the transform property.
The transition property ensures that when the icon needs to disappear, it does so smoothly rather than abruptly.
.delete-icon {
color: rgb(231, 50, 50);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: 0.3s;
}
When the button receives focus (after being clicked), we hide the delete icon by setting its opacity to 0. The 0.3-second transition creates a fade-out effect that feels natural and unobtrusive.
.delete-btn:focus .delete-icon {
opacity: 0;
transition: 0.3s;
}
For the confirmation text, we set its initial state to be invisible (opacity: 0) while still maintaining its position in the center of the button. We define a width of 150px, which will determine the expanded width of our button.
The text shares the same red color as the icon and border, with a bold font-weight of 600 to emphasize the importance of this confirmation step.
.delete-text {
width: 150px;
position: absolute;
opacity: 0;
transform: translate(-50%, -50%);
color: rgb(231, 50, 50);
font-weight: 600;
transition: 0.3s;
}
The key transformation happens when the button receives focus. The circular button expands horizontally from 50px to 150px while maintaining its height, creating a pill shape that can accommodate the confirmation text.
This dramatic shape change clearly signals to users that they've entered a new interaction state.
.delete-btn:focus {
width: 150px;
height: 50px;
transition: 0.3s;
}
Finally, when the button is focused, we make the confirmation text visible by setting its opacity to 1. Combined with the button's width expansion and the icon's disappearance, this creates a seamless transition from a simple delete button to a confirmation prompt.
.delete-btn:focus .delete-text {
opacity: 1;
transition: 0.3s;
}
This two-stage delete button provides a thoughtful user experience by requiring intentional confirmation for destructive actions. The smooth animations and cohesive visual design make the interaction both intuitive and aesthetically pleasing, while the pure CSS implementation ensures broad compatibility and performance efficiency.
<button class="delete-btn">
<span class="delete-text">CONFIRM DELETE</span>
<svg class="delete-icon" xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
<style>
.delete-btn {
position: relative;
width: 50px;
height: 50px;
border-radius: 25px;
border: 2px solid rgb(231, 50, 50);
background-color: #fff;
cursor: pointer;
box-shadow: 0 0 10px #333;
overflow: hidden;
transition: 0.3s;
}
.delete-btn:hover {
background-color: rgb(245, 207, 207);
transform: scale(1.2);
box-shadow: 0 0 4px #111;
transition: 0.3s;
}
.delete-icon {
color: rgb(231, 50, 50);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: 0.3s;
}
.delete-btn:focus .delete-icon {
opacity: 0;
transition: 0.3s;
}
.delete-text {
width: 150px;
position: absolute;
opacity: 0;
transform: translate(-50%, -50%);
color: rgb(231, 50, 50);
font-weight: 600;
transition: 0.3s;
}
.delete-btn:focus {
width: 150px;
height: 50px;
transition: 0.3s;
}
.delete-btn:focus .delete-text {
opacity: 1;
transition: 0.3s;
}
</style>
Thank you for reading this article.
Comments
No comments yet. Be the first to comment!