Open demo

CSS code

HTML 
<button type="button" class="pb pb-solid">Solid pill</button>
<button type="button" class="pb pb-tint">Tinted pill</button>
<button type="button" class="pb pb-outline">Bordered pill</button>
<button type="button" class="pb pb-live">Live now</button>
<button type="button" class="pb pb-count">Notifications <span class="pb-badge">12<span class="pb-sr"> unread</span></span></button>
CSS 
/* Pill buttons: fully rounded (border-radius:999px) in five fills; colour-only hover states. */
.pb{display:inline-flex;align-items:center;gap:9px;border:0;border-radius:999px;padding:11px 22px;font:inherit;font-size:.9rem;font-weight:700;
  line-height:1.25;cursor:pointer;transition:background-color .18s,color .18s,box-shadow .18s,border-color .18s}
.pb:focus-visible{outline:2px solid #4f46e5;outline-offset:3px}
.pb-solid{background:#4f46e5;color:#fff}
.pb-solid:hover{background:#4338ca;box-shadow:0 8px 20px -8px rgba(79,70,229,.7)}
.pb-tint{background:#eef2ff;color:#3730a3}
.pb-tint:hover{background:#e0e7ff}
.pb-outline{background:transparent;border:1.5px solid #858c98;color:#344054}
.pb-outline:hover{border-color:#4f46e5;color:#4f46e5}
.pb-live{background:#fff;border:1.5px solid #858c98;color:#344054}
.pb-live::before{content:"";width:8px;height:8px;border-radius:50%;background:#16a34a}
.pb-live:hover{border-color:#344054;background:#fafbfd}
.pb-count{gap:10px;padding-right:9px;background:#101828;color:#fff}
.pb-count:hover{background:#344054}
.pb-badge{border-radius:999px;background:rgba(255,255,255,.16);font-size:.78rem;padding:2px 9px}
.pb-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){.pb{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<button type="button" class="btn btn-pill btn-pill-solid rounded-pill d-inline-flex align-items-center">Solid pill</button>
<button type="button" class="btn btn-pill btn-pill-tint rounded-pill d-inline-flex align-items-center">Tinted pill</button>
<button type="button" class="btn btn-pill btn-pill-outline rounded-pill d-inline-flex align-items-center">Bordered pill</button>
<button type="button" class="btn btn-pill btn-pill-live rounded-pill d-inline-flex align-items-center">Live now</button>
<button type="button" class="btn btn-pill btn-pill-count rounded-pill d-inline-flex align-items-center">Notifications <span class="badge rounded-pill">12<span class="visually-hidden"> unread</span></span></button>
CSS 
/* .btn.rounded-pill with each fill set through --bs-btn-* variables; the counter is a .badge. */
.btn-pill{--bs-btn-padding-x:22px;--bs-btn-padding-y:11px;--bs-btn-font-size:.9rem;--bs-btn-font-weight:700;--bs-btn-line-height:1.25;
  --bs-btn-border-width:0;--bs-btn-focus-box-shadow:none;gap:9px;transition:background-color .18s,color .18s,box-shadow .18s,border-color .18s}
.btn-pill:focus-visible{outline:2px solid #4f46e5;outline-offset:3px}
.btn-pill-solid{--bs-btn-color:#fff;--bs-btn-bg:#4f46e5;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#4338ca;--bs-btn-active-color:#fff;--bs-btn-active-bg:#4338ca}
.btn-pill-solid:hover{box-shadow:0 8px 20px -8px rgba(79,70,229,.7)}
.btn-pill-tint{--bs-btn-color:#3730a3;--bs-btn-bg:#eef2ff;--bs-btn-hover-color:#3730a3;--bs-btn-hover-bg:#e0e7ff;--bs-btn-active-color:#3730a3;--bs-btn-active-bg:#e0e7ff}
.btn-pill-outline{--bs-btn-border-width:1.5px;--bs-btn-color:#344054;--bs-btn-bg:transparent;--bs-btn-border-color:#858c98;
  --bs-btn-hover-color:#4f46e5;--bs-btn-hover-bg:transparent;--bs-btn-hover-border-color:#4f46e5;
  --bs-btn-active-color:#4f46e5;--bs-btn-active-bg:transparent;--bs-btn-active-border-color:#4f46e5}
.btn-pill-live{--bs-btn-border-width:1.5px;--bs-btn-color:#344054;--bs-btn-bg:#fff;--bs-btn-border-color:#858c98;
  --bs-btn-hover-color:#344054;--bs-btn-hover-bg:#fafbfd;--bs-btn-hover-border-color:#344054;
  --bs-btn-active-color:#344054;--bs-btn-active-bg:#fafbfd;--bs-btn-active-border-color:#344054}
.btn-pill-live::before{content:"";width:8px;height:8px;border-radius:50%;background:#16a34a}
.btn-pill-count{--bs-btn-color:#fff;--bs-btn-bg:#101828;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#344054;--bs-btn-active-color:#fff;--bs-btn-active-bg:#344054;
  gap:10px;padding-right:9px}
.btn-pill-count .badge{--bs-badge-padding-x:9px;--bs-badge-padding-y:2px;--bs-badge-font-size:.78rem;--bs-badge-font-weight:700;--bs-badge-color:#fff;
  line-height:1.25;background:rgba(255,255,255,.16)}
@media (prefers-reduced-motion:reduce){.btn-pill{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<button type="button" class="inline-flex cursor-pointer items-center gap-[9px] rounded-full px-[22px] py-[11px] text-[.9rem] leading-[1.25] font-bold transition-[background-color,color,box-shadow,border-color] duration-[180ms] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#4f46e5] motion-reduce:transition-none bg-[#4f46e5] text-white hover:bg-[#4338ca] hover:shadow-[0_8px_20px_-8px_rgba(79,70,229,.7)]">Solid pill</button>
<button type="button" class="inline-flex cursor-pointer items-center gap-[9px] rounded-full px-[22px] py-[11px] text-[.9rem] leading-[1.25] font-bold transition-[background-color,color,box-shadow,border-color] duration-[180ms] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#4f46e5] motion-reduce:transition-none bg-[#eef2ff] text-[#3730a3] hover:bg-[#e0e7ff]">Tinted pill</button>
<button type="button" class="inline-flex cursor-pointer items-center gap-[9px] rounded-full px-[22px] py-[11px] text-[.9rem] leading-[1.25] font-bold transition-[background-color,color,box-shadow,border-color] duration-[180ms] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#4f46e5] motion-reduce:transition-none border-[1.5px] border-[#858c98] bg-transparent text-[#344054] hover:border-[#4f46e5] hover:text-[#4f46e5]">Bordered pill</button>
<button type="button" class="inline-flex cursor-pointer items-center gap-[9px] rounded-full px-[22px] py-[11px] text-[.9rem] leading-[1.25] font-bold transition-[background-color,color,box-shadow,border-color] duration-[180ms] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#4f46e5] motion-reduce:transition-none border-[1.5px] border-[#858c98] bg-white text-[#344054] before:size-2 before:rounded-full before:bg-[#16a34a] hover:border-[#344054] hover:bg-[#fafbfd]">Live now</button>
<button type="button" class="inline-flex cursor-pointer items-center rounded-full px-[22px] py-[11px] text-[.9rem] leading-[1.25] font-bold transition-[background-color,color,box-shadow,border-color] duration-[180ms] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#4f46e5] motion-reduce:transition-none gap-2.5 bg-[#101828] pr-[9px] text-white hover:bg-[#344054]">Notifications <span class="rounded-full bg-white/16 px-[9px] py-0.5 text-[.78rem]">12<span class="sr-only"> unread</span></span></button>

About this set

Five fully rounded buttons for modern product interfaces. Solid pill is indigo with a darker hover and a tinted shadow. Tinted pill uses a pale indigo background with a dark indigo label, a quieter secondary action. Bordered pill is transparent with a grey outline that turns indigo on hover. Live now is a white pill with a small green status dot drawn by a ::before pseudo-element, and Notifications carries a counter badge with the number 12 on a translucent white chip. Use the solid and tinted pills as primary and secondary actions, the bordered one for tertiary actions, and the dot and badge variants in headers and dashboards. Hover states change colour only, so nothing moves. The border radius is 999px, which keeps the ends round at any height. The grey outlines are dark enough for the button boundaries to reach 3:1 against the page, and the badge includes visually hidden text so screen readers hear 12 unread rather than a bare number. The Bootstrap version uses .rounded-pill on .btn with each fill set through –bs-btn-* variables, and a .badge for the counter.

What’s included

  • Solid, tinted, bordered, status-dot and counter-badge pills
  • Colour-only hover states, nothing moves
  • Status dot drawn with a ::before pseudo-element
  • Counter badge with hidden unread text for screen readers
  • Borders darkened to 3:1 against the page

Accessibility

Each pill is a native button named by its text; the Notifications button reads as Notifications 12 unread thanks to visually hidden text in the badge. Tab reaches every pill and focus draws a 2px indigo outline 3px outside it. Colour transitions are removed under prefers-reduced-motion.

Customise it

In plain CSS change the background and color on .pb-solid, .pb-tint, .pb-outline, .pb-live and .pb-count, and the padding on .pb. In Bootstrap set the --bs-btn-* colour variables on .btn-pill-* and --bs-badge-* on the badge; in Tailwind edit the bg-, text- and border- utilities.