How to Create Delete Button With Animation Using HTML and CSS

Hi coders I am back with another fantastic project in this project I created a Button Design with Animation Using only pure HTML and CSS.

I also share a complete source code with my readers and followers it is free of cost, not any subscription to get the source code of this project. You can download these code files and use them for free.

Delete Button Animation

There are many types of CSS button designs available online but this is very different from others because this is not a button it is also an animation button using CSS.

Buttons are a very important part of your website they provide a better user experience increase the functionality of your website and are very important to ranking in Google Research Results Pages (SERP).

In this design, I created a one-button with a delete icon when the user clicks on the button animation is started it is very satisfying to view the animation and increases user experience.

It is very simple to create this type of Button animation using HTML and CSS. If you are a beginner in coding and programming I highly recommend creating this and increasing your skills.

Source codes are given below for educational purposes.

About This Project

This project was created by the codingpakistan team to help students learn coding and programming in a simple way. If you want to join our team please follow us on Instagram.

Created by	Coding Pakistan
Languages	HTML and CSS
Source Code	Available Below
Preview	Take Preview

How to Create a Deleting Animation Button

There are some steps to create this type of Button Animation using HTML, and CSS, which are given below.

The first step is to create one folder.
Open this folder in Vs Code Editor and create two files in HTML and CSS,
Make sure the HTML file extension is (.html) and the CSS file extension is (.css).

After creating files, you link a CSS file with an HTML file with the help of this line code. (<link rel=”stylesheet” href=”style.css”>)
The last step is copying and pasting the given code into your files.

Deleting Button – Source Code

HTML FILE

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
      integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Share Button</title>
  </head>
  <body>
    <button>
      <span class="button-text"></span>
      <span class="animation">
        <span class="paper-wrapper">
          <span class="paper"></span>
        </span>
        <span class="shredded-wrapper">
          <span class="shredded"></span>
        </span>
        <span class="lid"></span>
        <span class="can">
          <span class="filler"></span>
        </span>
      </span>
    </button>
  </body>
</html>

CSS FILE

* {
    box-sizing: border-box;
  }
  
  html,
  body {
    height: 100%;
  }
  
  body {
    display: grid;
    place-items: center;
    margin: 0;
    background: #111111;
  }
  
  button {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 0;
    background: #ff2c6c;
    font-size: 22px;
    font-weight: 400;
    font-family: "Euclid Circular A";
    color: #f9f9f9;
    padding: 0 0 0 24px;
    width: 210px;
    height: 64px;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
  }
  
  .button-text {
    flex: 0 0 120px;
  }
  
  .button-text::before {
    content: "Delete User";
  }
  
  .animation {
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    scale: 1;
  }
  
  .can {
    overflow: hidden;
    position: relative;
    translate: 0 3px;
    width: 20px;
    height: 22px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border: 2px solid #ffffff;
  }
  
  .lid {
    position: absolute;
    top: 20px;
    left: 50%;
    translate: -50% 0;
    width: 22px;
    height: 2px;
    background: #ffffff;
  }
  
  @keyframes move {
    75%,
    100% {
      translate: 0 88px;
    }
  }
  
  .paper-wrapper,
  .shredded-wrapper {
    overflow: hidden;
    position: absolute;
    display: flex;
    top: -20px;
    left: 50%;
    margin-left: -5px;
    width: 10px;
    height: 64px;
  }
  
  .paper-wrapper {
    height: 40px;
  }
  
  .shredded-wrapper {
    top: 24px;
    height: 20px;
    justify-content: center;
  }
  
  .paper,
  .shredded {
    display: block;
    background: #ffffff;
    height: 20px;
  }
  
  .paper {
    width: 10px;
  }
  
  .shredded {
    margin-top: -40px;
    width: 2px;
  }
  
  .shredded::before,
  .shredded::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    width: inherit;
    height: inherit;
    background: inherit;
  }
  
  .shredded::before {
    left: -4px;
  }
  
  .shredded::after {
    right: -4px;
  }
  
  @keyframes fill {
    0%,
    20% {
      translate: 0 0;
    }
    40%,
    70% {
      translate: 0 -50%;
    }
    90%,
    100% {
      translate: 0 -100%;
    }
  }
  
  .filler {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -32px;
    width: 64px;
    height: 120%;
    background: #ffffff;
  }
  
  button:active {
    /* cursor: not-allowed; */
    opacity: 0.75;
  }
  
  button:active .button-text::before {
    content: "Deleting ...";
  }
  
  button:active :is(.paper, .shredded) {
    animation: move 1.25s linear 2 both;
  }
  
  button:active .filler {
    animation: fill 2.5s both;
  }