Animated Delete Button

Elevate user interaction on your website with an animated delete button. Learn how to implement a button that enhances the user experience through smooth animations and transitions.

Enhance your website's user interface with an animated delete button using HTML and CSS. This comprehensive guide will walk you through the process of integrating and customizing an animated delete button, ensuring it fits seamlessly into your website's design.

Step 1: Copy the Code Snippet

  • Start by copying the provided HTML and CSS code snippet for the animated delete button. This snippet includes the structure and styles needed to create an engaging and functional delete button.

Step 2: Link the CSS File

  • Ensure the CSS file (styles.css) is correctly linked in your HTML document. Add the following <link> tag within the <head> section to import the CSS styles: 
    <link rel="stylesheet" href="styles.css">

Step 3: Customize and Make it Yours

  • Personalize the delete button to fit your website's aesthetics and functionality. Adjust the CSS styles (styles.css) to change the button's color, size, font, or animations. Experiment with different hover and active states to create a unique and engaging delete button for your users.

By following these steps, you can implement and customize an animated delete button using HTML and CSS, enhancing user interaction and visual appeal on your website.

Code Explanation

HTML Code

<button>:
  • This is a <button> element, which is used to create a clickable button in HTML.
<span class="button-text"></span>:
  • This <span> element serves as a placeholder for text or content that would typically be displayed on the button. The class button-text suggests it may be styled or manipulated via CSS or JavaScript.
<span class="animation">:
  • This <span> element contains the animation elements for the button. It likely houses various visual elements that animate or change appearance when the button is interacted with or in certain states.
<span class="paper-wrapper">:
  • This <span> is a wrapper for an element that represents paper-like content.
<span class="paper"></span>:
  • Inside the .paper-wrapper, this <span> represents a piece of paper or a paper-like element.
<span class="shredded-wrapper">:
  • Another wrapper <span> for an element that represents shredded content.
<span class="shredded"></span>:
  • Inside the .shredded-wrapper, this <span> represents shredded or torn content.
<span class="lid"></span>:
  • This <span> element represents a lid, possibly for a container or object. Its purpose could be decorative or functional in an animation context.
<span class="can">:
  • Inside the .animation, this <span> represents a can or container element.
<span class="filler"></span>:
  • Inside the .can, this <span> represents filler content inside the can or container. It might visually depict something like liquid, foam, or any other filling material.

CSS Code

Universal Selector
* {
  box-sizing: border-box;
}
  • Applies box-sizing: border-box to all elements, ensuring padding and border are included in the element's total width and height.
Base Styles
html,
body {
  height: 100%;
}
body {
  display: grid;
  place-items: center;
  margin: 0;
  background: #111111;
}
  • Sets the height of html and body to 100%.
  • Centers content within the body using CSS Grid and place-items: center.
  • Removes default margins and sets a dark background color (#111111).
Button Styles
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;
}
  • Styles the button with a flexbox layout, centered content, rounded corners, no border, and a background color of #ff2c6c.
  • Sets font properties, padding, dimensions, text alignment, cursor, and a transition effect for smooth state changes.
Button Text
.button-text {
  flex: 0 0 120px;
}
.button-text::before {
  content: "Delete User";
}
  • Styles the .button-text to occupy a fixed width (120px) using flexbox.
  • Uses the ::before pseudo-element to insert the text "Delete User" before the .button-text element.
Animation Container
.animation {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  scale: 1;
}
  • Styles the .animation container to be relatively positioned, with overflow hidden, centered content, and fixed dimensions (64px by 64px).
Can and Lid
.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;
}
  • Styles the .can element as a small rectangle with rounded bottom corners, a solid border, and slight vertical translation.
  • Styles the .lid element as a small horizontal bar positioned at the top of the .can.
Animation Keyframes
@keyframes move {
  75%,
  100% {
    translate: 0 88px;
  }
}
@keyframes fill {
  0%,
  20% {
    translate: 0 0;
  }
  40%,
  70% {
    translate: 0 -50%;
  }
  90%,
  100% {
    translate: 0 -100%;
  }
}
  • Defines keyframe animations for .paper, .shredded, and .filler elements.
  • move: Moves elements downward.
  • fill: Translates the .filler element upward in stages.
Paper and Shredded
.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;
}
  • Styles .paper-wrapper and .shredded-wrapper as containers for paper and shredded pieces, positioned absolutely and centered horizontally.
  • Styles .paper and .shredded as small white blocks. The .shredded element includes ::before and ::after pseudo-elements for additional pieces.
Filler
.filler {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -32px;
  width: 64px;
  height: 120%;
  background: #ffffff;
}
  • Styles the .filler element as a white block positioned to fill the .can element when animated.
Active State
button:active {
  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;
}
  • Defines styles for the active state of the button.
  • Changes opacity and button text when the button is clicked.
  • Triggers move and fill animations for .paper, .shredded, and .filler elements, respectively.