Delete Button Animation Css | Delete Button Css – Codewithrandom







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

Delete Button Animation Css | Delete Button Css - Codewithrandom

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


Delete Button Animation Css | Delete Button Css - Codewithrandom

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

Delete Button Animation Css | Delete Button Css - Codewithrandom

Delete Button Animation Css | Delete Button Css - Codewithrandom

Delete Button Animation Css | Delete Button Css - Codewithrandom

Now that we have completed our javascript section,  Here is our updated output with javascriptHope 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

Share on:

Leave a Comment