Add to Cart Button

<label class="btn-add-to-cart">
  <input class="btn-add-to-cart-input" type="checkbox" aria-label="Add to cart">
  <span class="btn-add-to-cart-face" aria-hidden="true">
    <span class="btn-add-to-cart-label">Add to cart</span>
    <span class="btn-add-to-cart-added">Added<svg viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>
    <span class="btn-add-to-cart-box"></span>
    <svg class="btn-add-to-cart-cart" viewBox="0 0 24 24"><path d="M1.5 3.5h3l2.4 11h11.4L21 7H5.6"/><circle cx="9" cy="19" r="1.6"/><circle cx="16.5" cy="19" r="1.6"/></svg>
  </span>
</label>

.btn-add-to-cart {
  --c: var(--btn-color, #3b82f6);
  position: relative;
  display: inline-grid;
  place-items: center;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn-add-to-cart-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.btn-add-to-cart-face {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 10.5em;
  height: 3em;
  border-radius: 0.75em;
  background: var(--c);
  color: #fff;
  box-shadow: 0 0.4em 0.9em -0.4em var(--c);
  transition: transform 0.2s ease;
}
.btn-add-to-cart-label,
.btn-add-to-cart-added {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}
.btn-add-to-cart-added { opacity: 0; }
.btn-add-to-cart-added svg {
  width: 1.1em;
  height: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn-add-to-cart-cart {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1.8em;
  height: 1.8em;
  margin-top: -0.95em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateX(-2.2em);
}
.btn-add-to-cart-box {
  position: absolute;
  top: 50%;
  left: 5em;
  width: 0.6em;
  height: 0.6em;
  margin-top: -0.7em;
  border-radius: 0.12em;
  background: #fff;
  box-shadow: inset 0 -0.14em 0 color-mix(in srgb, var(--c) 35%, transparent);
  transform: translateY(-2.6em);
}
.btn-add-to-cart:active .btn-add-to-cart-face { transform: scale(0.95); }
.btn-add-to-cart-input:focus-visible ~ .btn-add-to-cart-face {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}
.btn-add-to-cart-input:checked ~ .btn-add-to-cart-face .btn-add-to-cart-label {
  animation: btn-add-to-cart-out 0.25s ease-in forwards;
}
.btn-add-to-cart-input:checked ~ .btn-add-to-cart-face .btn-add-to-cart-cart {
  animation: btn-add-to-cart-drive 1.6s forwards;
}
.btn-add-to-cart-input:checked ~ .btn-add-to-cart-face .btn-add-to-cart-box {
  animation: btn-add-to-cart-drop 1.6s forwards;
}
.btn-add-to-cart-input:checked ~ .btn-add-to-cart-face .btn-add-to-cart-added {
  animation: btn-add-to-cart-in 0.4s cubic-bezier(0.3, 0.7, 0.4, 1.4) 1.3s forwards;
}
@keyframes btn-add-to-cart-drive {
  0% { transform: translateX(-2.2em); animation-timing-function: cubic-bezier(0.25, 0.8, 0.4, 1); }
  28% { transform: translateX(4.35em) rotate(0deg); }
  36% { transform: translateX(4.35em) rotate(-7deg); }
  44%, 54% { transform: translateX(4.35em) rotate(0deg); animation-timing-function: ease-out; }
  60% { transform: translateX(4.1em) rotate(-8deg); animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0); }
  86%, 100% { transform: translateX(11.5em) rotate(0deg); }
}
@keyframes btn-add-to-cart-drop {
  0%, 20% { transform: translateY(-2.6em); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  34% { transform: translateY(0) scale(1.2, 0.8); }
  42%, 54% { transform: translateY(0); animation-timing-function: ease-out; }
  60% { transform: translateX(-0.25em); animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0); }
  86%, 100% { transform: translateX(7.15em); }
}
@keyframes btn-add-to-cart-out {
  to { opacity: 0; transform: translateY(1em); }
}
@keyframes btn-add-to-cart-in {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-add-to-cart, .btn-add-to-cart *, .btn-add-to-cart::before, .btn-add-to-cart::after, .btn-add-to-cart *::before, .btn-add-to-cart *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Similar buttons