Pulsante di ordine animato HTML CSS JavaScript

20 codex

Apri nell'Editor Video Pubblica il Tuo Codice

Pulsante di ordine animato HTML CSS JavaScript

Consigliato

24 September 2025

Codice grafico interattivo SVG Dragon

19 January 2026

Lettore di giochi Flash con emulatore Ruffle

6 March 2025

Un codice di lebdev

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced Order Button</title>
    <style>
        :root {
            --primary: #275efe;
            --primary-light: #7699ff;
            --dark: #1c212e;
            --grey-light: #f6f8ff;
            --white: #ffffff;
            --green: #10b981;
        }

* {
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
        }

body {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: var(--grey-light);
            font-family: 'Inter', sans-serif;
        }

.order-button {
            appearance: none;
            border: 0;
            background: var(--dark);
            position: relative;
            height: 64px;
            width: 240px;
            padding: 0;
            outline: none;
            cursor: pointer;
            border-radius: 12px;
            -webkit-tap-highlight-color: transparent;
            overflow: hidden;
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

.order-button:active {
            transform: scale(0.96);
        }

.order-button .default,
        .order-button .success {
            display: block;
            font-size: 16px;
            font-weight: 600;
            line-height: 64px;
            color: var(--white);
            transition: opacity 0.3s, transform 0.3s;
        }

.order-button .success {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            opacity: 0;
            transform: translateY(12px);
            color: var(--green);
        }

.order-button .box {
            width: 24px;
            height: 24px;
            z-index: 10;
            position: absolute;
            left: 32px;
            top: 20px;
            background: #e0b88a;
            border-radius: 2px;
            transform: translateY(-80px);
        }

.order-button .box::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 10px;
            height: 4px;
            background: rgba(0,0,0,0.1);
        }

.order-button .truck {
            position: absolute;
            height: 32px;
            width: 72px;
            left: -72px;
            top: 18px;
            z-index: 5;
        }

.order-button .truck .back {
            position: absolute;
            left: 0;
            top: 0;
            width: 48px;
            height: 32px;
            background: var(--primary);
            border-radius: 4px;
        }

.order-button .truck .front {
            position: absolute;
            left: 46px;
            bottom: 0;
            width: 24px;
            height: 20px;
            background: var(--primary);
            border-radius: 4px 8px 4px 4px;
        }

.order-button .truck .front::before {
            content: '';
            position: absolute;
            width: 10px;
            height: 8px;
            background: var(--primary-light);
            left: 8px;
            top: 2px;
            border-radius: 2px;
        }

.order-button .truck .wheel {
            position: absolute;
            bottom: -4px;
            height: 10px;
            width: 10px;
            background: #000;
            border-radius: 50%;
            border: 2px solid #555;
        }

.order-button .truck .wheel.front-wheel { left: 52px; }
        .order-button .truck .wheel.back-wheel { left: 8px; }

/* Animation States */
        .order-button.animate .default {
            opacity: 0;
            transform: translateY(-12px);
        }

.order-button.animate .box {
            animation: box-drop 2.5s forwards;
        }

.order-button.animate .truck {
            animation: truck-move 2.5s forwards;
        }

.order-button.animate .truck .wheel {
            animation: wheel-spin 2.5s forwards;
        }

.order-button.animate.done .success {
            opacity: 1;
            transform: translateY(0);
        }

@keyframes box-drop {
            20% { transform: translateY(-80px); }
            35% { transform: translateY(0); }
            45% { transform: translateY(-8px); }
            55% { transform: translateY(0); }
            60% { transform: translateX(0); }
            100% { transform: translateX(250px); }
        }

@keyframes truck-move {
            25% { transform: translateX(80px); }
            60% { transform: translateX(80px); }
            100% { transform: translateX(350px); }
        }

@keyframes wheel-spin {
            0%, 25% { transform: rotate(0); }
            100% { transform: rotate(720deg); }
        }
    </style>
</head>
<body>

<button class="order-button" id="orderBtn">
        <span class="default">Complete Order</span>
        <span class="success">Order Placed</span>
        <div class="box"></div>
        <div class="truck">
            <div class="back"></div>
            <div class="front"></div>
            <div class="wheel back-wheel"></div>
            <div class="wheel front-wheel"></div>
        </div>
    </button>

btn.addEventListener('click', () => {
            if(!btn.classList.contains('animate')) {
                btn.classList.add('animate');
                
                // Set to success state after truck finishes
                setTimeout(() => {
                    btn.classList.add('done');
                }, 2500);

// Reset button after 5 seconds
                setTimeout(() => {
                    btn.classList.remove('animate');
                    btn.classList.remove('done');
                }, 5500);
            }
        });
    </script>
</body>
</html>

Consigliato

Codice grafico interattivo SVG Dragon

Lettore di giochi Flash con emulatore Ruffle

Un codice di lebdev

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS