Delete button with confirmation - A step-by-step guide

Tutorial on how to create a delete button that transforms to "Confirm delete", on click - CSS only.

HTML

For HTML, we need a button and two elements inside. First one is span element with "CONFIRM DELETE" text, and the second one is the delete svg.

<button>
    <span>CONFIRM DELETE</span>
    <svg 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>

CSS

For CSS, first we'll style the button.

We'll set position to relative and width and height to 50x50 px, which will form a circle with border radius set to 25px.
We'll set border to red and background to white, with a little dark box shadow.

Then we'll set cursor to pointer, overflow to hidden and transition to 300 ms.

button {
    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: .3s;
}

On hover, we'll change background color to light red, increase it's size a bit, as well as box shadow and add a little transition.

button:hover {
    background-color: rgb(245, 207, 207);
    transform: scale(1.2);
    box-shadow: 0 0 4px #111;
    transition: .3s;
}

Now we'll style the delete svg.

We'll set color to the same red color as button's border and place the element in center using absolute position with transform property.

Lastly, we'll add a little transition.

svg {
    color: rgb(231, 50, 50);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .3s;
}

On hover, svg we'll set opacity to 0 to svg.

By adding the transition, this disappearing will be nice and smooth.

button:focus svg {
    opacity: 0;
    transition: .3s;
}

As for our text element inside a button, we'll set width to 150px and place it in center (same as svg - using transform property).

We'll set opacity to zero, which means that this element won't be seen. We'll display it on hover (when svg is hidden).

We'll set color to red (same red as svg and button's border), font weight to 300 and transition to 300 ms.

span {
    width: 150px;
    position: absolute;
    opacity: 0;
    transform: translate(-50%, -50%);
    color: rgb(231, 50, 50);
    font-weight: 600;
    transition: .3s;
}

On focus, we'll set button's width to 150px (same as text element) and height to 50 px.

Also, we'll set transition to 300 ms.

button:focus {
    width: 150px;
    height: 50px;
    transition: .3s;
}

On button focus, we'll set opacity to one on our text element.
With transition set to 300 ms, this will appear smoothly.

button:focus span {
    opacity: 1;
    transition: .3s;
}

And that is it.

You can find video tutorial and full code here.

Thanks for reading. ❤️