Xóa nút css

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, trong mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem

Nếu bạn tìm thấy chúng tôi trên TikTok trong bài đăng sau, hãy xem bài viết này và sao chép-dán toàn bộ mã

Mã hóa vui vẻ. 😻

@sáng tạo. tim Bạn có thể phát hiện ra lỗi không?

Nội dung.
1. Mã HTML
2. Mã CSS
3. Mã Javascript

Nhận mã của bạn ⬇️

1. Mã HTML

Delete Item

2. Mã CSS

.button {
--background: #1A1423;
--background-hover: #372549;
--text: #fff;
--shadow: rgba(0, 9, 61, .2);
--paper: #B75D69;
--paper-lines: #fff;
--trash: #e1e6f9;
--trash-lines: #bbc1e1;
--check: #fff;
--check-background: #B75D69;
position: relative;
border: none;
outline: none;
background: none;
padding: 25px 49px;
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, 2));
transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
}
.button span {
display: block;
font-size: 17px;
line-height: 25px;
font-weight: 500;
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;
}

3. Mã Javascript

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();
}));

Tôi hy vọng bạn đã tìm thấy hướng dẫn này hữu ích

Để biết thêm các hướng dẫn về phát triển web hoặc thiết kế UI/UX, hãy theo dõi chúng tôi trên

• TikTok
• Instagram
• Twitter
• Facebook
• Blog

Các tài nguyên hữu ích khác

• Tài nguyên miễn phí (Bộ công cụ giao diện người dùng, Quản trị viên và Mẫu di động)
• Sách thiết kế UI/UX
• Khóa học thiết kế UI/UX CSS của Tailwind - Bao gồm mã
• Khóa học thiết kế UI/UX cơ bản