Table of Contents
Delete Button Animation Css | Delete Button Css – Codewithrandom
.png "Delete Button Animation Css | Delete Button Css - Codewithrandom")
Welcome🎉 to Code With Random blog. In this blog, we learn how we create a Delete Button Animation Css. We use HTML, Css, and javascript for Delete Button Animation Css. I hope you enjoy our blog so let’s start with a basic HTML structure for the Delete Button Animation Css.
HTML Code
<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>Delete Item</span>
</button>
There is all the HTML code for the Delete Button Animation Css. Now, you can see an output with Delete Button Animation Css then we write javascript for Delete Button Animation Css.
output
CSS code
.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;
}
Css Updated output
Javascript code
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();
}));
Final output
Now that we have completed our javascript section, Here is our updated output with javascript. Hope you like the Delete Button Animation Css. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!
In this post, we learn how to create a Delete Button Animation Css using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Written by – Code With Random/Anki
Code by – Aaron Iker