Animated Border Button: CSS Border Animation

Animated Border Button

A pill button whose outline carries two bright comets that chase each other around it, so it keeps drawing the eye while it waits. A conic layer with two arcs sits between the face and a faint track.

Also known as: animated border button css, button border animation css, gradient border button.

Color Base size 16px Dark background Hold hover state

HTML

<button class="bdr-animated-border-button" type="button">Get started</button>

CSS

@property --bdr-animated-border-button-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.bdr-animated-border-button {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  isolation: isolate;
  padding: 0.85em 2em;
  border: 0;
  border-radius: 99em;
  background: transparent;
  color: #f8fafc;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bdr-animated-border-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 0.15em solid transparent;
  border-radius: inherit;
  background:
    linear-gradient(color-mix(in srgb, var(--c) 10%, #0b0f19), color-mix(in srgb, var(--c) 10%, #0b0f19)) padding-box,
    conic-gradient(from var(--bdr-animated-border-button-a), transparent 0 22%, var(--c) 47%, color-mix(in srgb, var(--c) 25%, #fff) 50%, transparent 0 72%, color-mix(in oklch, var(--c), #ec4899 85%) 97%, #fce7f3 100%) border-box,
    linear-gradient(color-mix(in srgb, var(--c) 30%, transparent), color-mix(in srgb, var(--c) 30%, transparent)) border-box;
  animation: bdr-animated-border-button-spin 3s linear infinite;
}
.bdr-animated-border-button:hover { transform: translateY(-0.12em); }
.bdr-animated-border-button:active { transform: scale(0.97); }
.bdr-animated-border-button:focus-visible {
  outline: 0.14em solid var(--c);
  outline-offset: 0.25em;
}
@keyframes bdr-animated-border-button-spin {
  to { --bdr-animated-border-button-a: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .bdr-animated-border-button, .bdr-animated-border-button *, .bdr-animated-border-button::before, .bdr-animated-border-button::after, .bdr-animated-border-button *::before, .bdr-animated-border-button *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Tailwind CSS version

The same effect using Tailwind utility classes. No custom CSS or config needed.

<button type="button" class="relative overflow-hidden rounded-full bg-blue-500/30 p-[2px] font-semibold leading-none text-slate-50 transition hover:-translate-y-0.5 active:scale-95">
  <span class="absolute inset-[-300%] animate-spin bg-[conic-gradient(transparent_0_22%,#3b82f6_47%,#bfdbfe_50%,transparent_50%_72%,#ec4899_97%,#fce7f3_100%)] [animation-duration:3s]"></span>
  <span class="relative block rounded-full bg-slate-950 px-8 py-3.5">Get started</span>
</button>

Customizing this snippet

Color: set --bdr-color on the element or a parent. Currently previewing #3b82f6.
Base size: set --bdr-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
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.

Animated Border Button

HTML

CSS

Tailwind CSS version

Customizing this snippet

Similar border animations