Rose Glass CSS button
Pink tinted frosted glass. 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(244, 114, 182, .2800000000000000266453525910037569701671600341796875);
border: 1px solid rgba(251, 207, 232, .59999999999999997779553950749686919152736663818359375);
border-radius: 16px;
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(14px) saturate(160%);
backdrop-filter: blur(14px) 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__icon {
display: inline-block;
transition: transform 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:hover .btn__icon {
transform: translateX(3px);
}
.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,
.btn__icon {
transition: none;
animation: none;
}
}HTML
<button class="btn" type="button">
Follow
<span class="btn__icon" aria-hidden="true">♥</span>
</button>How this button is built
- Background: a translucent fill (#f472b6 at 28% opacity).
- Type: Inter, weight 600, 16px, in #ffffff.
- Shape: 16px rounded corners 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(14px)for a frosted-glass look (works best over a colourful background). - Interaction: on hover it lifts 2px, brightens slightly and nudges its icon, 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.