Bouton de commande animé HTML CSS JavaScript

633 codex

Ouvrir dans l'éditeur Publiez votre code

Bouton de commande animé HTML CSS JavaScript

Recommandé

21 October 2024

Règles de mot de passe + bascule des composants Web

9 May 2026

67 combats de saut

1 July 2025

Formulaire de connexion moderne V2

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