Frosted Pill CSS button
Frosted glass pill with a bright edge. Hover, click and tab to it to see every state.
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5em;
padding: 14px 28px;
font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 1.2;
color: #ffffff;
background: rgba(255, 255, 255, .179999999999999993338661852249060757458209991455078125);
border: 1px solid rgba(255, 255, 255, .34999999999999997779553950749686919152736663818359375);
border-radius: 999px;
box-shadow: 0 8px 32px -8px rgba(0, 0, 0, .299999999999999988897769753748434595763683319091796875), inset 0 1px 0 0 rgba(255, 255, 255, .40000000000000002220446049250313080847263336181640625);
-webkit-backdrop-filter: blur(16px) saturate(160%);
backdrop-filter: blur(16px) saturate(160%);
cursor: pointer;
text-decoration: none;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
transition: transform 200ms cubic-bezier(.2,.8,.2,1), box-shadow 200ms cubic-bezier(.2,.8,.2,1), filter 200ms cubic-bezier(.2,.8,.2,1);
}
.btn:hover {
transform: translateY(-2px);
filter: brightness(1.12000000000000010658141036401502788066864013671875);
box-shadow: 0 10px 36px -8px rgba(0, 0, 0, .299999999999999988897769753748434595763683319091796875), inset 0 1px 0 0 rgba(255, 255, 255, .40000000000000002220446049250313080847263336181640625);
}
.btn:active {
transform: translateY(1px) scale(0.979999999999999982236431605997495353221893310546875);
box-shadow: 0 7px 32px -8px rgba(0, 0, 0, .299999999999999988897769753748434595763683319091796875), inset 0 1px 0 0 rgba(255, 255, 255, .40000000000000002220446049250313080847263336181640625);
transition-duration: 100ms;
}
.btn:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.btn {
transition: none;
animation: none;
}
}HTML
<button class="btn" type="button">
Join the waitlist
</button>How this button is built
- Background: a translucent fill (#ffffff at 18% opacity).
- Type: Inter, weight 600, 16px, in #ffffff.
- Shape: a fully rounded pill shape with 14px × 28px padding, plus a 1px solid border.
- Depth: a soft drop shadow and an inset highlight along the edge.
- Effects:
backdrop-filter: blur(16px)for a frosted-glass look (works best over a colourful background). - Interaction: on hover it lifts 2px and brightens slightly, and it squishes slightly when clicked, with 200ms transitions.
- Accessibility: a visible
:focus-visiblering for keyboard users, and all motion turns off underprefers-reduced-motion.
How to use it
- Copy the CSS into your stylesheet. The
@importline loads the Inter font from Google Fonts. Move it to the top of your file, or drop it if you already load the font. - Paste the HTML where you want the button. It works on
<button>,<a>and<input type="submit">. - Change the label, or rename the
.btnclass if it clashes with your framework. Want a different colour or size? Open it in the editor, change it visually, and copy the new code.
Glass effects need something colourful behind them (a photo, gradient or shapes) to look right. On a plain background the blur has nothing to blur.