Glass CSS button
Frosted translucent glass, for colourful or photo backgrounds. 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, .14000000000000001332267629550187848508358001708984375);
border: 1px solid rgba(255, 255, 255, .34999999999999997779553950749686919152736663818359375);
border-radius: 16px;
box-shadow: 0 8px 32px -8px rgba(0, 0, 0, .34999999999999997779553950749686919152736663818359375), inset 0 1px 0 0 rgba(255, 255, 255, .40000000000000002220446049250313080847263336181640625);
-webkit-backdrop-filter: blur(14px) saturate(160%);
backdrop-filter: blur(14px) saturate(160%);
position: relative;
overflow: hidden;
isolation: isolate;
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::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
transform: translateX(-120%);
transition: transform .7s ease;
pointer-events: none;
}
.btn:hover {
transform: translateY(-2px);
filter: brightness(1.12000000000000010658141036401502788066864013671875);
box-shadow: 0 10px 36px -8px rgba(0, 0, 0, .34999999999999997779553950749686919152736663818359375), inset 0 1px 0 0 rgba(255, 255, 255, .40000000000000002220446049250313080847263336181640625);
}
.btn:hover::after {
transform: translateX(120%);
}
.btn:active {
transform: translateY(1px) scale(0.979999999999999982236431605997495353221893310546875);
box-shadow: 0 7px 32px -8px rgba(0, 0, 0, .34999999999999997779553950749686919152736663818359375), inset 0 1px 0 0 rgba(255, 255, 255, .40000000000000002220446049250313080847263336181640625);
transition-duration: 100ms;
}
.btn:focus-visible {
outline: 3px solid #a78bfa;
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.btn,
.btn::after {
transition: none;
animation: none;
}
}HTML
<button class="btn" type="button">
Get started
</button>How this button is built
- Background: a translucent fill (#ffffff at 14% 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) and a light sweep (::after) that slides across on hover. - 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.