Hướng dẫn add to cart button html css - nút thêm vào giỏ hàng html css

Chào mừng bạn đến với blog Codewithrandom. Trong bài viết này, chúng tôi tạo một hình ảnh động thêm vào nút. Chúng tôi sử dụng HTML, CSS và JavaScript để thêm hình ảnh động nút.Add To Cart Button Animation. We use Html,Css, and Javascript for Add To Cart Button Animation.

Tôi hy vọng bạn thích blog của chúng tôi, vì vậy hãy để bắt đầu với cấu trúc HTML cơ bản cho hoạt hình nút Thêm vào nút.Add To Cart Button Animation.

Có tất cả mã HTML cho hoạt hình nút Thêm vào giỏ hàng. Bây giờ, bạn có thể thấy một đầu ra với & nbsp; thêm hoạt hình nút giỏ hàng sau đó chúng tôi viết & nbsp; javascript để thêm hoạt hình nút cart.

Trang web thương mại điện tử sử dụng HTML CSS và JavaScript

HTML Cập nhật đầu ra cho nút Thêm vào giỏ hàng.

Mã CSS cho nút Thêm vàoFor Add To Button

.button {
--background: #362a89;
--text: #fff;
--cart: #fff;
--tick: var(--background);
position: relative;
border: none;
background: none;
padding: 8px 28px;
border-radius: 8px;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
-webkit-mask-image: -webkit-radial-gradient(white, black);
overflow: hidden;
cursor: pointer;
text-align: center;
min-width: 144px;
color: var(--text);
background: var(--background);
transform: scale(var(--scale, 1));
transition: transform 0.4s cubic-bezier(0.36, 1.01, 0.32, 1.27);
}
.button:active {
--scale: 0.95;
}
.button span {
font-size: 14px;
font-weight: 500;
display: block;
position: relative;
padding-left: 24px;
margin-left: -8px;
line-height: 26px;
transform: translateY(var(--span-y, 0));
transition: transform 0.7s ease;
}
.button span:before, .button span:after {
content: '';
width: var(--w, 2px);
height: var(--h, 14px);
border-radius: 1px;
position: absolute;
left: var(--l, 8px);
top: var(--t, 6px);
background: currentColor;
transform: scale(0.75) rotate(var(--icon-r, 0deg)) translateY(var(--icon-y, 0));
transition: transform 0.65s ease 0.05s;
}
.button span:after {
--w: 14px;
--h: 2px;
--l: 2px;
--t: 12px;
}
.button .cart {
position: absolute;
left: 50%;
top: 50%;
margin: -13px 0 0 -18px;
transform-origin: 12px 23px;
transform: translateX(-120px) rotate(-18deg);
}
.button .cart:before, .button .cart:after {
content: '';
position: absolute;
}
.button .cart:before {
width: 6px;
height: 6px;
border-radius: 50%;
box-shadow: inset 0 0 0 2px var(--cart);
bottom: 0;
left: 9px;
filter: drop-shadow(11px 0 0 var(--cart));
}
.button .cart:after {
width: 16px;
height: 9px;
background: var(--cart);
left: 9px;
bottom: 7px;
transform-origin: 50% 100%;
transform: perspective(4px) rotateX(-6deg) scaleY(var(--fill, 0));
transition: transform 1.2s ease var(--fill-d);
}
.button .cart svg {
z-index: 1;
width: 36px;
height: 26px;
display: block;
position: relative;
fill: none;
stroke: var(--cart);
stroke-width: 2px;
stroke-linecap: round;
stroke-linejoin: round;
}
.button .cart svg polyline:last-child {
stroke: var(--tick);
stroke-dasharray: 10px;
stroke-dashoffset: var(--offset, 10px);
transition: stroke-dashoffset 0.4s ease var(--offset-d);
}
.button.loading {
--scale: 0.95;
--span-y: -32px;
--icon-r: 180deg;
--fill: 1;
--fill-d: 0.8s;
--offset: 0;
--offset-d: 1.73s;
}
.button.loading .cart {
animation: cart 3.4s linear forwards 0.2s;
}
@keyframes cart {
12.5% {
transform: translateX(-60px) rotate(-18deg);
}
25%, 45%, 55%, 75% {
transform: none;
}
50% {
transform: scale(0.9);
}
44%, 56% {
transform-origin: 12px 23px;
}
45%, 55% {
transform-origin: 50% 50%;
}
87.5% {
transform: translateX(70px) rotate(-18deg);
}
100% {
transform: translateX(140px) rotate(-18deg);
}
}
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 UI', 'Inter', Arial;
justify-content: center;
align-items: center;
background: #eceffc;
}
body .dribbble {
position: fixed;
display: block;
right: 20px;
bottom: 20px;
}
body .dribbble img {
display: block;
height: 28px;
}
body .twitter {
position: fixed;
display: block;
right: 64px;
bottom: 14px;
}
body .twitter svg {
width: 32px;
height: 32px;
fill: #1da1f2;
}

HTML CSS Cập nhật đầu ra cho nút Thêm vào giỏ hàng.

& nbsp; javascript cho mã & nbsp; thêm nút giỏ hàngCode Add To Cart Button

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

Đầu ra cuối cùng của nút Thêm vào giỏ hàng

Trang web danh mục đầu tư bằng cách sử dụng HTML CSS và JavaScript (Mã nguồn)

Trang web danh mục đầu tư bằng cách sử dụng HTML CSS và JavaScript (Mã nguồn)

Bây giờ chúng tôi đã hoàn thành phần JavaScript của chúng tôi để thêm nút giỏ hàng, đầu ra được cập nhật của chúng tôi với JavaScript. & NBSP; hy vọng bạn thích hoạt hình thêm nút thêm vào giỏ hàng. Xem các blog khác của chúng tôi và có được kiến ​​thức trong phát triển phía trước. Cảm ơn bạn!

Hơn 50 dự án phía trước có mã nguồn

Bài đăng này dạy chúng tôi cách tạo một & nbsp; thêm hoạt hình nút cart bằng cách sử dụng HTML & CSS & NBSP; và JavaScript đơn giản. Nếu chúng tôi mắc lỗi hoặc bất kỳ sự nhầm lẫn nào, xin vui lòng gửi bình luận để trả lời hoặc giúp bạn học dễ dàng.

Được viết bởi - mã với ngẫu nhiên/anki & nbsp;

Thêm vào thông tin dự án nút giỏ hàng

Bạn sử dụng ngôn ngữ mã hóa nào cho nút Thêm vào giỏ hàng này?

Tôi sử dụng HTML để tạo cấu trúc của nút Thêm vào giỏ hàng và để tạo kiểu tôi sử dụng CSS. Và đối với chức năng chính, tôi sử dụng mã JavaScript cho hoạt hình nút.

Chúng ta có thể thêm nút Thêm vào giỏ hàng trong bất kỳ dự án ECOMERCE nào không?