DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Designyff
Designyff

Posted on • Originally published at designyff.com

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

Confirm delete button

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

And that is it.

You can find video tutorial and full code here.

Thanks for reading. ❀️

Top comments (0)

16 Libraries You Should Know as a React Developer

Being a modern React developer is not about knowing just React itself. To stay competitive, it is highly recommended to explore the whole ecosystem. This article contains some of the most useful React component libraries to speed up your developer workflow.