Deliver Button

jitesh208
Jan 28, 2026 3
Live Preview

Live Editor

<button class="deliver-btn" id="deliverBtn">

  <!-- Delivery Van SVG -->
  <svg class="van" viewBox="0 0 24 24">
    <rect x="1" y="7" width="15" height="10" rx="2"></rect>
    <path d="M16 10h4l3 3v4h-7z"></path>
    <circle cx="6" cy="19" r="2"></circle>
    <circle cx="18" cy="19" r="2"></circle>
  </svg>

  <span class="label">Deliver</span>
</button>
*{
  box-sizing:border-box;
  font-family:'Inter',sans-serif;
}

body{
  min-height:100vh;
  display:grid;
  place-items:center;
  background:#f3f4f6;
}

/* Button */
.deliver-btn{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 26px;
  border-radius:18px;
  border:none;
  background:#111827;
  color:#fff;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  overflow:hidden;
  transition:.3s;
  box-shadow:0 16px 30px rgba(0,0,0,.25);
}

/* Hover */
.deliver-btn:hover{
  background:#2563eb;
}

/* Van icon */
.van{
  width:28px;
  height:28px;
  fill:none;
  stroke:#fff;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Sending state */
.deliver-btn.sending{
  pointer-events:none;
}

.deliver-btn.sending .van{
  animation:drive 1.2s linear infinite;
}

/* Delivered */
.deliver-btn.done{
  background:#22c55e;
}

.deliver-btn.done .van{
  animation:none;
}

/* Drive animation */
@keyframes drive{
  0%{transform:translateX(0);}
  50%{transform:translateX(8px);}
  100%{transform:translateX(0);}
}
const btn = document.getElementById("deliverBtn");

btn.addEventListener("click", () => {
  btn.classList.add("sending");
  btn.querySelector(".label").textContent = "Delivering...";

  setTimeout(() => {
    btn.classList.remove("sending");
    btn.classList.add("done");
    btn.querySelector(".label").textContent = "Delivered";
  }, 2000);
});
Categories

Deliver Button

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
