Announcement Pill Button: CSS Button Style & Animation

Announcement Pill Button

The small pill above a hero headline: a solid New tag with a pinging dot, a one-line announcement and a chevron. The ping is the Tailwind style scale and fade, so both versions match.

Also known as: new feature badge button, hero announcement pill, whats new button css.

Color Base size 18px Dark background Hold hover state

HTML

<button class="btn-announcement-pill" type="button">
  <span class="btn-announcement-pill-tag"><span class="btn-announcement-pill-dot" aria-hidden="true"></span>New</span>
  Introducing Workflows
  <svg class="btn-announcement-pill-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg>
</button>

CSS

.btn-announcement-pill {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  gap: 0.6em;
  padding: 0.3em 0.8em 0.3em 0.3em;
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  border-radius: 2em;
  background: color-mix(in srgb, var(--c) 8%, transparent);
  color: inherit;
  font-weight: 500;
  transition: border-color 0.25s ease, background-color 0.25s ease;}
.btn-announcement-pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0.75em 0.4em 0.65em;
  border-radius: 2em;
  background: var(--c);
  color: #fff;
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.btn-announcement-pill-dot {
  position: relative;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: #fff;
}
.btn-announcement-pill-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  animation: btn-announcement-pill-ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.btn-announcement-pill-chev {
  width: 1em;
  height: 1em;
  color: var(--c);
  transition: transform 0.25s ease;
}
.btn-announcement-pill:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--c) 60%, transparent);
  background: color-mix(in srgb, var(--c) 14%, transparent);
}
.btn-announcement-pill:is(:hover, :focus-visible) .btn-announcement-pill-chev { transform: translateX(0.2em); }
@keyframes btn-announcement-pill-ping {
  75%, 100% { transform: scale(2.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-announcement-pill, .btn-announcement-pill *, .btn-announcement-pill::before, .btn-announcement-pill::after, .btn-announcement-pill *::before, .btn-announcement-pill *::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 class="group inline-flex items-center gap-2.5 rounded-full border border-blue-500/30 bg-blue-500/10 py-1 pl-1 pr-3 text-sm font-medium transition hover:border-blue-500/60 hover:bg-blue-500/15">
  <span class="inline-flex items-center gap-1.5 rounded-full bg-blue-500 px-2.5 py-1 text-xs font-bold text-white">
    <span class="relative flex h-1.5 w-1.5"><span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-white"></span><span class="relative inline-flex h-1.5 w-1.5 rounded-full bg-white"></span></span>
    New
  </span>
  Introducing Workflows
  <svg class="h-4 w-4 text-blue-500 transition-transform group-hover:translate-x-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg>
</button>

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.

Announcement Pill Button

HTML

CSS

Tailwind CSS version

Customizing this snippet

Similar buttons