Skip to content

Instantly share code, notes, and snippets.

@Dossantosjoel7

Dossantosjoel7/glass-button.html

Created June 12, 2025 17:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Dossantosjoel7/74d011d50ce413f2ce166f64bbd099fa to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Dossantosjoel7/74d011d50ce413f2ce166f64bbd099fa to your computer and use it in GitHub Desktop.
Download ZIP
Liquid Glass Effect with CSS
Raw
glass-button.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liquid Glass</title>
<style>
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
background-image: url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=3164&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
background-size: cover;
background-attachment: scroll;
height: 200vh;
}
.button {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 15px 30px;
border-radius: 50px;
color: white;
font-size: 1.2rem;
border: 1px solid rgba(255, 255, 255, 0.2);
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(20px) saturate(120%);
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<button class="button">Glass Button</button>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment