Soft Pill
The Linear / Raycast / Vercel button trend of 2026 — soft gradient pill with a crisp inset highlight, ambient glow, and a tiny shortcut chip on the right. Hover brightens the glow without moving the button.
Soft Pill the 24th of 43 designs in the 43 CSS Button Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<button class="btn-soft">
<svg
class="btn-soft-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.4"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="M5 12h14M13 5l7 7-7 7" />
</svg>
<span class="btn-soft-text">Continue</span>
<span class="btn-soft-kbd" aria-hidden="true">⏎</span>
</button> .btn-soft {
--soft-bg-1: #2a2a3a;
--soft-bg-2: #16161e;
--soft-glow: #6e7eff;
position: relative;
padding: 11px 14px 11px 18px;
border: 1px solid rgba(255,255,255,0.06);
border-radius: 999px;
background: linear-gradient(180deg, var(--soft-bg-1), var(--soft-bg-2));
color: #f5f5fa;
font-family: ui-sans-serif, system-ui;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.01em;
cursor: pointer;
display: inline-flex; align-items: center; gap: 8px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.12),
inset 0 -1px 0 rgba(0,0,0,0.4),
0 6px 14px rgba(0,0,0,0.35),
0 0 0 0 var(--soft-glow);
transition: box-shadow 0.25s ease, transform 0.12s ease;
}
.btn-soft-icon {
width: 14px; height: 14px;
color: var(--soft-glow);
flex-shrink: 0;
}
.btn-soft-kbd {
font-family: ui-monospace, monospace;
font-size: 11px;
color: #a8a8b8;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 4px;
padding: 1px 6px;
margin-left: 4px;
}
.btn-soft:hover {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.15),
inset 0 -1px 0 rgba(0,0,0,0.4),
0 6px 14px rgba(0,0,0,0.35),
0 0 22px -4px var(--soft-glow);
}
.btn-soft:active { transform: translateY(1px); }