Botón de pedido animado HTML CSS JavaScript

327 codex

Abrir en el editor Publica tu código

Botón de pedido animado HTML CSS JavaScript

Recomendado

16 March 2024

Código de menú lateral HTML

19 November 2025

Plantilla de panel de administración HTML con CSS y gráficos

23 August 2025

Galería de coches de lujo: Motores y vehículos premium

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>

CSS