Bouton de commande animé HTML CSS JavaScript

22 codex

Ouvrir dans l'éditeur Video Publiez votre code

Bouton de commande animé HTML CSS JavaScript

Recommandé

22 November 2025

Modèle HTML de formulaire de connexion Cyberpunk

19 May 2025

animation moderne

16 January 2026

Lecteur de jeux Flash avec émulateur Ruffle

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>

Recommandé

Modèle HTML de formulaire de connexion Cyberpunk

animation moderne

Lecteur de jeux Flash avec émulateur Ruffle

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS