Create an Animated Order Button with Truck Delivery Animation

Let's create an Animated Order Button with a delivery truck animation using HTML, CSS, and JavaScript. This button creates a delightful user experience with a complete delivery animation that plays when users complete their purchase! 🚚📦

✅

Success

Perfect for e-commerce websites! Learn how to combine smooth CSS animations with JavaScript to create engaging user interactions.

🎯 What You'll Build

An animated button with:

Delivery truck animation that drives across the button
Package loading sequence with doors opening
Headlight effects that turn on during animation
Success confirmation with checkmark
Road lines animation for motion effect

📁 File Structure

project-folder/
├── index.html
├── style.css
└── script.js

🏗️ HTML Code

This HTML creates an animated order button with multiple components: the truck, package box, text states, and road lines. Each element will be animated independently to create a cohesive delivery animation.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animated Order Button</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <button class="order">
    <!-- Default text -->
    <span class="default">Complete Order</span>
    
    <!-- Success text with checkmark -->
    <span class="success">
      Order Placed
      <svg viewbox="0 0 12 10">
        <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
      </svg>
    </span>
    
    <!-- Package box -->
    <div class="box"></div>
    
    <!-- Delivery truck -->
    <div class="truck">
      <div class="back"></div>
      <div class="front">
        <div class="window"></div>
      </div>
      <div class="light top"></div>
      <div class="light bottom"></div>
    </div>
    
    <!-- Road lines animation -->
    <div class="lines"></div>
  </button>
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

🎨 CSS Code

This CSS creates the complete button styling with all animation effects. The truck, package, and success states are carefully timed to create a smooth delivery animation sequence.

css

:root {
  --primary: #ef4444;
  --primary-light: #f87171;
  --dark: #1C212E;
  --grey-dark: #3F4656;
  --grey: #6C7486;
  --grey-light: #CDD9ED;
  --white: #FFF;
  --green: #16BF78;
  --sand: #fbbf24;
  --sand-light: #fde68a;
}
 
.order {
  appearance: none;
  border: 0;
  background: var(--dark);
  position: relative;
  height: 63px;
  width: 240px;
  padding: 0;
  outline: none;
  cursor: pointer;
  border-radius: 32px;
  overflow: hidden;
  transition: transform 0.3s ease;
}
 
.order span {
  --o: 1;
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  top: 19px;
  line-height: 24px;
  color: var(--white);
  font-size: 16px;
  font-weight: 500;
  opacity: var(--o);
  transition: opacity 0.3s ease;
}
 
.order span.default {
  transition-delay: 0.3s;
}
 
.order span.success {
  --offset: 16px;
  --o: 0;
}
 
.order span.success svg {
  width: 12px;
  height: 10px;
  display: inline-block;
  vertical-align: top;
  fill: none;
  margin: 7px 0 0 4px;
  stroke: var(--green);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16px;
  stroke-dashoffset: var(--offset);
  transition: stroke-dashoffset 0.3s ease;
}
 
.order:active {
  transform: scale(0.96);
}
 
.order .lines {
  opacity: 0;
  position: absolute;
  height: 3px;
  background: var(--white);
  border-radius: 2px;
  width: 6px;
  top: 30px;
  left: 100%;
  box-shadow: 15px 0 0 var(--white), 30px 0 0 var(--white), 
              45px 0 0 var(--white), 60px 0 0 var(--white);
}
 
.order .truck {
  width: 60px;
  height: 41px;
  left: 100%;
  z-index: 1;
  top: 11px;
  position: absolute;
  transform: translateX(24px);
}
 
.order .truck .back {
  left: 0;
  top: 0;
  width: 60px;
  height: 41px;
  border-radius: 2px;
  background: linear-gradient(var(--white), var(--grey-light));
  z-index: 1;
  position: absolute;
}
 
.order .truck .front {
  overflow: hidden;
  position: absolute;
  border-radius: 2px 9px 9px 2px;
  width: 26px;
  height: 41px;
  left: 60px;
  background: var(--primary);
}
 
.order .truck .front .window {
  overflow: hidden;
  border-radius: 2px 8px 8px 2px;
  background: var(--primary-light);
  width: 22px;
  height: 41px;
  position: absolute;
  left: 2px;
  top: 0;
  z-index: 1;
}
 
.order .truck .light {
  width: 3px;
  height: 8px;
  left: 83px;
  position: absolute;
  border-radius: 2px;
  background: #f0dc5f;
}
 
.order .truck .light.top {
  top: 4px;
}
 
.order .truck .light.bottom {
  bottom: 4px;
}
 
.order .box {
  width: 21px;
  height: 21px;
  right: 100%;
  top: 21px;
  position: absolute;
  border-radius: 2px;
  background: linear-gradient(var(--sand-light), var(--sand));
}
 
.order.animate .default {
  --o: 0;
  transition-delay: 0s;
}
 
.order.animate .success {
  --offset: 0;
  --o: 1;
  transition-delay: 7s;
}
 
.order.animate .truck {
  animation: truck 10s ease forwards;
}
 
.order.animate .box {
  animation: box 10s ease forwards;
}
 
.order.animate .lines {
  animation: lines 10s ease forwards;
}
 
@keyframes truck {
  10%, 30% {
    transform: translateX(-164px);
  }
  40% {
    transform: translateX(-104px);
  }
  60% {
    transform: translateX(-224px);
  }
  75%, 100% {
    transform: translateX(24px);
  }
}
 
@keyframes box {
  8%, 10% {
    transform: translateX(40px);
    opacity: 1;
  }
  25% {
    transform: translateX(112px);
    opacity: 1;
  }
  26% {
    transform: translateX(112px);
    opacity: 0;
  }
  27%, 100% {
    transform: translateX(0px);
    opacity: 0;
  }
}
 
@keyframes lines {
  0%, 30% {
    opacity: 0;
    transform: scaleY(0.7) translateX(0);
  }
  35%, 65% {
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
  100% {
    transform: scaleY(0.7) translateX(-400px);
  }
}
 
body {
  min-height: 100vh;
  font-family: Roboto, Arial;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f5f5;
}

⚡ JavaScript Code

This JavaScript triggers the animation when the button is clicked. It adds the animate class to start all CSS animations and automatically removes it after 10 seconds to allow clicking again.

javascript

$('.order').click(function (e) {
  let button = $(this);
  
  if (!button.hasClass('animate')) {
    button.addClass('animate');
    setTimeout(() => {
      button.removeClass('animate');
    }, 10000);
  }
});

💡

Download Source Code

Need the complete project files? Download the ready-to-use source code and start building!

📥 Download Source Code

✨ How It Works

The Animation Breakdown

Initial State:

Button displays "Complete Order" text
Truck is positioned off-screen to the right
Package box is off-screen to the left
All elements are hidden/positioned outside the button

Animation Sequence:

0-10% - Truck drives in from the right
10-30% - Truck stops at the package location
25% - Package moves into the truck (loading)
30-60% - Truck drives away with the package
35-65% - Road lines appear showing motion
60-75% - Truck exits the screen
7s - Success message appears with checkmark

Key Technologies Used

Technology	Purpose
HTML	Button structure and SVG elements
CSS	Animations, styling, and keyframes
JavaScript/jQuery	Click handling and animation control
`@keyframes`	Multi-step animation sequences
`transform`	Smooth position changes

🎨 Customization Options

Change Button Color

css

:root {
  --primary: #3b82f6;        /* Blue truck */
  --primary-light: #60a5fa;
}

Change Package Color

css

:root {
  --sand: #8b5cf6;           /* Purple box */
  --sand-light: #a78bfa;
}

Adjust Animation Speed

css

.order.animate .truck {
  animation: truck 5s ease forwards;  /* Faster animation */
}
 
.order.animate .box {
  animation: box 5s ease forwards;
}
 
.order.animate .lines {
  animation: lines 5s ease forwards;
}

Change Button Text

html

<span class="default">Place Order</span>
<span class="success">Success! 🎉</span>

Remove jQuery Dependency

Use vanilla JavaScript instead:

javascript

document.querySelector('.order').addEventListener('click', function() {
  if (!this.classList.contains('animate')) {
    this.classList.add('animate');
    setTimeout(() => {
      this.classList.remove('animate');
    }, 10000);
  }
});

🐛 Troubleshooting

⚠️

Warning

Animation not playing? Make sure jQuery is loaded before your script.

Truck not moving smoothly? Check that overflow: hidden is set on the button.

Elements visible outside button? Verify the button has position: relative and proper overflow settings.

Success message not showing? Confirm the animation timing matches the JavaScript timeout duration.

🎉 Conclusion

Building an Animated Order Button with HTML, CSS, and JavaScript creates a memorable user experience for your e-commerce site. This animation teaches you:

Complex CSS keyframe animations
Animation timing and synchronization
DOM manipulation with JavaScript
Creating multi-step animated sequences
Building delightful user interactions

Your checkout buttons will never be boring again! 🚀

Happy Coding! ✨

Need help? 📧 flemuxstudio@gmail.com | 📞 +91 62899 98072

Written by: Flemux Studio 🚀