Delete button with confirmation - step by step guide

Tutorial on how to create a delete button that transitions to "Confirm Delete" when clicked - CSS only.

Hypertext Markup Language

For HTML, we need a button and two inner elements. The first is a span element with "CONFIRM DELETE" text and the second is to delete the svg.

<button>
    <span>CONFIRM DELETE</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="25" height=