Make Animated Trash Button With HTML, CSS & Javascript

Hey Programmers! In this post, we will make an Animated Trash Button With HTML, CSS & JavaScript. The main aim of this tutorial is to create an engaging trash button using CSS properties like transform, transition & Before and After to enhance user interaction.

Imagine you have to delete various files or elements on the web page instead of just seeing them disappear suddenly they will see an animated trash button. This will make the user experience more engaging.

Also Read: Download Buttons With Progress Bar

We will understand the entire CSS & JavaScript step by step so that you can make such a project on your own. At the end of this post, I will share the entire source code of this project so that you can run this project on your local device.

Concepts Used To Make Trash Button

1. CSS Transform, Translate
2. CSS Svg Properties Like Fill
3. CSS Animations & Keyframes
4. CSS Box Model, Box Shadow & Border Radius
5. JavaScript Class List ( Add & Remove )
6. JavaScritpt Event Listner & Prevent Default

Also Read: Make Back To Top Button With HTML, CSS & Javascript

Understanding HTML To Make Trash Button

HTML Structure:

• <button class="button">: Defines a button element with the class “button”.
  1. This button will be styled using CSS and will have an event listener attached using JavaScript.
• <div class="trash">: Nested within the button, creates a container for the trash icon and animations.
  1. This div will hold various visual elements related to the trash icon animation.
• <div class="top">: Inside the “trash” div, create a top section for additional effects.
  1. This div represents the top part of the trash icon animation.
• <div class="paper"></div>: Inside the “top” div, create a paper-like element.
  1. This div represents a piece of paper or debris in the trash icon animation.
• <div class="box"></div>: Inside the “trash” div, create a box-like element.
  1. This div represents the body of the trash can in the animation.
• <div class="check">: Inside the “trash” div, create a checkmark element.
  1. This div represents the checkmark that appears when the button is clicked.
• <svg viewBox="0 0 8 6">: Inside the “check” div, create an SVG element for the checkmark.
  1. This SVG element defines the shape of the checkmark.
  2. <polyline points="1 3.4 2.71428571 5 7 1"></polyline>: Draw the checkmark using polyline points.
• <span>Trash This</span>: Adds text content to the button.
  1. Displays the text “Trash This” inside the button, indicating its purpose.

Also Read: Add To Cart Button With HTML, CSS & JavaScript

Understanding CSS To Make Trash Button

• The CSS code begins by defining custom properties using CSS variables. These variables start with “–” and allow for easy customization of various visual aspects of the button.
• For instance:
  css .button { --background: #2b3044; --background-hover: #1e2235; --text: #fff; ... }
• Here, --background, --background-hover, and --text are custom properties representing background colors and text color.

1. Button Styles:

• The .button class styles the button element itself. It resets default button styles and creates a custom appearance.
• Key properties include:
  1. position: relative;: Establishes the button’s positioning context.
  2. border: none; outline: none;: Removes default border and outline styles.
  3. background: none;: Sets a transparent background.
  4. padding: 10px 24px;: Adds padding inside the button.
  5. border-radius: 7px;: Rounds the button’s corners for a softer look.
• These styles lay the foundation for the button’s appearance.

1. Trash Icon Styles:

• The .trash class styles the container for the trash icon. It positions the various elements of the icon and defines transitions for animation.
• Notable properties include:
  1. display: block;: Sets the display property to block to ensure the icon container takes up its own space.
  2. position: relative;: Establishes the container’s positioning context.
  3. Other positioning and transformation properties are used to position the different parts of the trash icon precisely.
• These styles lay out the structure of the trash icon and prepare it for animation.

1. Styles for Specific Icon Elements:

• Within the .trash container, specific classes like .top, .paper, .box, and .check style different parts of the trash icon.
• For example, .paper:before and .paper:after styles create lines to represent crumpled paper inside the trash can.
• These styles define the visual details of each component of the trash icon.

Understanding JavaScript To Make Trash Button

1. Event Handling:

• The JavaScript code selects all elements with the class “button” and adds a click event listener to each one. This ensures that when any button with this class is clicked, the defined function will be executed.

document.querySelectorAll('.button').forEach(button => button.addEventListener('click', e => { ... }))

1. Button Animation Js:

• When a button is clicked, the function checks if the button does not already have the class “delete”. If it doesn’t, it adds the “delete” class to trigger the CSS animation.
• if (!button.classList.contains('delete')) { button.classList.add('delete'); ... }

1. Animation Reset:

• After a specified duration (3200 milliseconds or 3.2 seconds), the function removes the “delete” class from the button. This resets the button’s appearance, allowing the animation to be triggered again on subsequent clicks.
• setTimeout(() => button.classList.remove('delete'), 3200);

Source Code Of Trash Button

HTML:

<button class="button">
    <div class="trash">
        <div class="top">
            <div class="paper"></div>
        </div>
        <div class="box"></div>
        <div class="check">
            <svg viewBox="0 0 8 6">
                <polyline points="1 3.4 2.71428571 5 7 1"></polyline>
            </svg>
        </div>
    </div>
    <span>Trash This</span>
</button>

Also Read: Social Share Buttons With HTML & CSS

CSS:

<style>
    .button {
	 --background: #2b3044;
	 --background-hover: #1e2235;
	 --text: #fff;
	 --shadow: rgba(0, 9, 61, .2);
	 --paper: #5c86ff;
	 --paper-lines: #fff;
	 --trash: #e1e6f9;
	 --trash-lines: #bbc1e1;
	 --check: #fff;
	 --check-background: #5c86ff;
	 position: relative;
	 border: none;
	 outline: none;
	 background: none;
	 padding: 10px 24px;
	 border-radius: 7px;
	 min-width: 142px;
	 -webkit-appearance: none;
	 -webkit-tap-highlight-color: transparent;
	 cursor: pointer;
	 display: flex;
	 color: var(--text);
	 background: var(--btn, var(--background));
	 box-shadow: 0 var(--shadow-y, 4px) var(--shadow-blur, 8px) var(--shadow);
	 transform: scale(var(--scale, 1));
	 transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
}
 .button span {
	 display: block;
	 font-size: 14px;
	 line-height: 25px;
	 font-weight: 600;
	 opacity: var(--span-opacity, 1);
	 transform: translateX(var(--span-x, 0)) translateZ(0);
	 transition: transform 0.4s ease var(--span-delay, 0.2s), opacity 0.3s ease var(--span-delay, 0.2s);
}
 .button .trash {
	 display: block;
	 position: relative;
	 left: -8px;
	 transform: translate(var(--trash-x, 0), var(--trash-y, 1px)) translateZ(0) scale(var(--trash-scale, 0.64));
	 transition: transform 0.5s;
}
 .button .trash:before, .button .trash:after {
	 content: '';
	 position: absolute;
	 height: 8px;
	 width: 2px;
	 border-radius: 1px;
	 background: var(--icon, var(--trash));
	 bottom: 100%;
	 transform-origin: 50% 6px;
	 transform: translate(var(--x, 3px), 2px) scaleY(var(--sy, 0.7)) rotate(var(--r, 0deg));
	 transition: transform 0.4s, background 0.3s;
}
 .button .trash:before {
	 left: 1px;
}
 .button .trash:after {
	 right: 1px;
	 --x: -3px;
}
 .button .trash .top {
	 position: absolute;
	 overflow: hidden;
	 left: -4px;
	 right: -4px;
	 bottom: 100%;
	 height: 40px;
	 z-index: 1;
	 transform: translateY(2px);
}
 .button .trash .top:before, .button .trash .top:after {
	 content: '';
	 position: absolute;
	 border-radius: 1px;
	 background: var(--icon, var(--trash));
	 width: var(--w, 12px);
	 height: var(--h, 2px);
	 left: var(--l, 8px);
	 bottom: var(--b, 5px);
	 transition: background 0.3s, transform 0.4s;
}
 .button .trash .top:after {
	 --w: 28px;
	 --h: 2px;
	 --l: 0;
	 --b: 0;
	 transform: scaleX(var(--trash-line-scale, 1));
}
 .button .trash .top .paper {
	 width: 14px;
	 height: 18px;
	 background: var(--paper);
	 left: 7px;
	 bottom: 0;
	 border-radius: 1px;
	 position: absolute;
	 transform: translateY(-16px);
	 opacity: 0;
}
 .button .trash .top .paper:before, .button .trash .top .paper:after {
	 content: '';
	 width: var(--w, 10px);
	 height: 2px;
	 border-radius: 1px;
	 position: absolute;
	 left: 2px;
	 top: var(--t, 2px);
	 background: var(--paper-lines);
	 transform: scaleY(0.7);
	 box-shadow: 0 9px 0 var(--paper-lines);
}
 .button .trash .top .paper:after {
	 --t: 5px;
	 --w: 7px;
}
 .button .trash .box {
	 width: 20px;
	 height: 25px;
	 border: 2px solid var(--icon, var(--trash));
	 border-radius: 1px 1px 4px 4px;
	 position: relative;
	 overflow: hidden;
	 z-index: 2;
	 transition: border-color 0.3s;
}
 .button .trash .box:before, .button .trash .box:after {
	 content: '';
	 position: absolute;
	 width: 4px;
	 height: var(--h, 20px);
	 top: 0;
	 left: var(--l, 50%);
	 background: var(--b, var(--trash-lines));
}
 .button .trash .box:before {
	 border-radius: 2px;
	 margin-left: -2px;
	 transform: translateX(-3px) scale(0.6);
	 box-shadow: 10px 0 0 var(--trash-lines);
	 opacity: var(--trash-lines-opacity, 1);
	 transition: transform 0.4s, opacity 0.4s;
}
 .button .trash .box:after {
	 --h: 16px;
	 --b: var(--paper);
	 --l: 1px;
	 transform: translate(-0.5px, -16px) scaleX(0.5);
	 box-shadow: 7px 0 0 var(--paper), 14px 0 0 var(--paper), 21px 0 0 var(--paper);
}
 .button .trash .check {
	 padding: 4px 3px;
	 border-radius: 50%;
	 background: var(--check-background);
	 position: absolute;
	 left: 2px;
	 top: 24px;
	 opacity: var(--check-opacity, 0);
	 transform: translateY(var(--check-y, 0)) scale(var(--check-scale, 0.2));
	 transition: transform var(--check-duration, 0.2s) ease var(--check-delay, 0s), opacity var(--check-duration-opacity, 0.2s) ease var(--check-delay, 0s);
}
 .button .trash .check svg {
	 width: 8px;
	 height: 6px;
	 display: block;
	 fill: none;
	 stroke-width: 1.5;
	 stroke-dasharray: 9px;
	 stroke-dashoffset: var(--check-offset, 9px);
	 stroke-linecap: round;
	 stroke-linejoin: round;
	 stroke: var(--check);
	 transition: stroke-dashoffset 0.4s ease var(--checkmark-delay, 0.4s);
}
 .button.delete {
	 --span-opacity: 0;
	 --span-x: 16px;
	 --span-delay: 0s;
	 --trash-x: 46px;
	 --trash-y: 2px;
	 --trash-scale: 1;
	 --trash-lines-opacity: 0;
	 --trash-line-scale: 0;
	 --icon: #fff;
	 --check-offset: 0;
	 --check-opacity: 1;
	 --check-scale: 1;
	 --check-y: 16px;
	 --check-delay: 1.7s;
	 --checkmark-delay: 2.1s;
	 --check-duration: 0.55s;
	 --check-duration-opacity: 0.3s;
}
 .button.delete .trash:before, .button.delete .trash:after {
	 --sy: 1;
	 --x: 0;
}
 .button.delete .trash:before {
	 --r: 40deg;
}
 .button.delete .trash:after {
	 --r: -40deg;
}
 .button.delete .trash .top .paper {
	 animation: paper 1.5s linear forwards 0.5s;
}
 .button.delete .trash .box:after {
	 animation: cut 1.5s linear forwards 0.5s;
}
 .button.delete, .button:hover {
	 --btn: var(--background-hover);
	 --shadow-y: 5px;
	 --shadow-blur: 9px;
}
 .button:active {
	 --shadow-y: 2px;
	 --shadow-blur: 5px;
	 --scale: 0.94;
}
 @keyframes paper {
	 10%, 100% {
		 opacity: 1;
	}
	 20% {
		 transform: translateY(-16px);
	}
	 40% {
		 transform: translateY(0);
	}
	 70%, 100% {
		 transform: translateY(24px);
	}
}
 @keyframes cut {
	 0%, 40% {
		 transform: translate(-0.5px, -16px) scaleX(0.5);
	}
	 100% {
		 transform: translate(-0.5px, 24px) scaleX(0.5);
	}
}
 html {
	 box-sizing: border-box;
	 -webkit-font-smoothing: antialiased;
}
 * {
	 box-sizing: inherit;
}
 *:before, *:after {
	 box-sizing: inherit;
}
 body {
	 min-height: 100vh;
	 display: flex;
	 font-family: 'Inter', Arial;
	 justify-content: center;
	 align-items: center;
	 background: #eceffc;
}
 body .twitter {
	 position: fixed;
	 display: block;
	 right: 16px;
	 bottom: 16px;
}
 body .twitter svg {
	 width: 32px;
	 height: 32px;
	 fill: #1da1f2;
}
 
</style>

JavaScript:

<script>
document.querySelectorAll('.button').forEach(button => button.addEventListener('click', e => {
    if(!button.classList.contains('delete')) {
        button.classList.add('delete');
        setTimeout(() => button.classList.remove('delete'), 3200);
    }
    e.preventDefault();
}));

</script>

About Author