Submit, Loading, Success Button: CSS Button Style & Animation

Submit, Loading, Success Button

Click and the pill shrinks into a spinning ring, then grows back green with a check drawn in. Three states from one hidden checkbox and chained animation delays. Click again to reset.

Also known as: submit button animation css, css button loading animation, css button success animation.

Color Base size 18px Dark background Hold hover state

HTML

<label class="btn-submit-loading-success">
  <input class="btn-submit-loading-success-input" type="checkbox" aria-label="Submit">
  <span class="btn-submit-loading-success-face" aria-hidden="true">
    <span class="btn-submit-loading-success-label">Submit</span>
    <span class="btn-submit-loading-success-done"><svg viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Sent</span>
  </span>
  <span class="btn-submit-loading-success-ring" aria-hidden="true"></span>
</label>

CSS

.btn-submit-loading-success {
  --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;
  --ok: #16a34a;
  width: 8.5em;
  height: 2.9em;}
.btn-submit-loading-success-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.btn-submit-loading-success-face {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 1.45em;
  background-color: var(--c);
  color: #fff;
  box-shadow: 0 0.4em 1em -0.4em var(--c);
  transition: transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1.4);
}
.btn-submit-loading-success-label,
.btn-submit-loading-success-done {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  white-space: nowrap;
}
.btn-submit-loading-success-done { opacity: 0; }
.btn-submit-loading-success-done svg {
  width: 1.2em;
  height: 1.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
}
.btn-submit-loading-success-ring {
  position: absolute;
  inset: 0;
  width: 2.9em;
  height: 2.9em;
  margin: auto;
  box-sizing: border-box;
  border: 0.24em solid color-mix(in srgb, var(--c) 22%, transparent);
  border-top-color: var(--c);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.btn-submit-loading-success:active .btn-submit-loading-success-face { transform: scale(0.95); }
.btn-submit-loading-success-input:focus-visible ~ .btn-submit-loading-success-face {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}
.btn-submit-loading-success-input:checked ~ .btn-submit-loading-success-face {
  animation: btn-submit-loading-success-morph 2.6s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.btn-submit-loading-success-input:checked ~ .btn-submit-loading-success-face .btn-submit-loading-success-label {
  animation: btn-submit-loading-success-out 0.25s ease-in forwards;
}
.btn-submit-loading-success-input:checked ~ .btn-submit-loading-success-face .btn-submit-loading-success-done {
  animation: btn-submit-loading-success-in 0.4s cubic-bezier(0.3, 0.7, 0.4, 1.4) 2.1s forwards;
}
.btn-submit-loading-success-input:checked ~ .btn-submit-loading-success-face svg {
  animation: btn-submit-loading-success-draw 0.35s ease-out 2.3s forwards;
}
.btn-submit-loading-success-input:checked ~ .btn-submit-loading-success-ring {
  animation:
    btn-submit-loading-success-spin 0.6s linear 0.25s 3,
    btn-submit-loading-success-show 1.85s linear 0.25s forwards;
}
@keyframes btn-submit-loading-success-morph {
  0% { width: 100%; background-color: var(--c); box-shadow: 0 0.4em 1em -0.4em var(--c); }
  14%, 77% { width: 2.9em; background-color: transparent; box-shadow: 0 0 0 transparent; }
  92%, 100% { width: 100%; background-color: var(--ok); box-shadow: 0 0.4em 1em -0.4em var(--ok); }
}
@keyframes btn-submit-loading-success-out {
  to { opacity: 0; transform: scale(0.6); }
}
@keyframes btn-submit-loading-success-in {
  from { opacity: 0; transform: translateY(0.5em); }
  to { opacity: 1; transform: none; }
}
@keyframes btn-submit-loading-success-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes btn-submit-loading-success-spin {
  to { transform: rotate(1turn); }
}
@keyframes btn-submit-loading-success-show {
  0%, 100% { opacity: 0; }
  8%, 88% { opacity: 1; }
}

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

Customizing this snippet

Color: set --btn-color on the element or a parent. Currently previewing #3b82f6.
Base size: set --btn-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 18px.
Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Submit, Loading, Success Button

HTML

CSS

Customizing this snippet

Similar buttons