Delete button with confirmation - A step-by-step guide
Tags: css, webdev, tutorial, html
Published: 2022-10-04 10:29:04


![Confirm delete button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fepvcfubscr9h1r3b73z.png)

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

## <u>HTML</u>
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.

```html
<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>
```
      

## <u>CSS</u>
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.

```css
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.

```css
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.

```css
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.

```css
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.

```css
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.

```css
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.

```css
button:focus span {
    opacity: 1;
    transition: .3s;
}
```
      
And that is it.

You can find video tutorial and full code [here](https://designyff.com/code/confirm_delete_button).

Thanks for reading. ❤️