Add to cart

About Add to cart

Add to cart is an animated CSS button by @Nishusk. Preview the interaction, customize its HTML, styles and JavaScript, or download the files with creator credit.

Effects and categories

Loading, Icon, Social, 3D, Animated

Using this example

Copy the HTML or download index.html, style.css and app.js. Test keyboard focus, motion and contrast in your own project.

Usage, Tailwind and licensing questions

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Add to cart</title>
        <!-- styles -->
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <button class="button">
            <span>Add to cart</span>
            <div class="cart">
                <svg viewBox="0 0 36 26">
                    <polyline
                        points="1 2.5 6 2.5 10 18.5 25.5 18.5 28.5 7.5 7.5 7.5"
                    ></polyline>
                    <polyline points="15 13.5 17 15.5 22 10.5"></polyline>
                </svg>
            </div>
        </button>
        <script src="app.js"></script>
    </body>
</html>

.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;
}

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