Liquid Glass CSS button
Glossy liquid glass with a curved highlight. 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 32px;
font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 1.2;
color: #ffffff;
background: linear-gradient(180deg, rgba(255, 255, 255, .419999999999999984456877655247808434069156646728515625) 0%, rgba(255, 255, 255, .11999999999999999555910790149937383830547332763671875) 55%, rgba(255, 255, 255, .2200000000000000011102230246251565404236316680908203125) 100%);
border: 1px solid rgba(255, 255, 255, .5500000000000000444089209850062616169452667236328125);
border-radius: 999px;
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .34999999999999997779553950749686919152736663818359375), inset 0 2px 1px 0 rgba(255, 255, 255, .6999999999999999555910790149937383830547332763671875), inset 0 -6px 12px 0 rgba(255, 255, 255, .1499999999999999944488848768742172978818416595458984375);
-webkit-backdrop-filter: blur(20px) saturate(160%);
backdrop-filter: blur(20px) 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 12px 34px -10px rgba(0, 0, 0, .34999999999999997779553950749686919152736663818359375), inset 0 2px 1px 0 rgba(255, 255, 255, .6999999999999999555910790149937383830547332763671875), inset 0 -6px 12px 0 rgba(255, 255, 255, .1499999999999999944488848768742172978818416595458984375);
}
.btn:hover::after {
transform: translateX(120%);
}
.btn:active {
transform: translateY(1px) scale(0.979999999999999982236431605997495353221893310546875);
box-shadow: 0 9px 30px -10px rgba(0, 0, 0, .34999999999999997779553950749686919152736663818359375), inset 0 2px 1px 0 rgba(255, 255, 255, .6999999999999999555910790149937383830547332763671875), inset 0 -6px 12px 0 rgba(255, 255, 255, .1499999999999999944488848768742172978818416595458984375);
transition-duration: 100ms;
}
.btn:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.btn,
.btn::after {
transition: none;
animation: none;
}
}HTML
<button class="btn" type="button">
Continue
</button>How this button is built
- Background: a 3-stop
linear-gradient()at 180° (#ffffff → #ffffff → #ffffff). - Type: Inter, weight 600, 16px, in #ffffff.
- Shape: a fully rounded pill shape with 14px × 32px padding, plus a 1px solid border.
- Depth: a soft drop shadow and inset shadows for a highlighted, sculpted edge.
- Effects:
backdrop-filter: blur(20px)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.