Bouton de commande animé HTML CSS JavaScript

760 codex

Ouvrir dans l'éditeur Publiez votre code

Bouton de commande animé HTML CSS JavaScript

Recommandé

13 December 2025

Code Canvas HTML WebGL de Super Mario 64

14 May 2024

Titre de l'animation

5 March 2026

Bouton lumineux HTML avec icône Discord

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