BUTTONS

Glassmorphism Button

A modern glass-style button with a translucent background, soft border and smooth hover effect. Copy the code and use it in your own project.

HTML
<button class="glass-btn" type="button">
  <span>Hover Me</span>
</button>
CSS
.glass-btn{
  padding:15px 34px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:12px;
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:#ffffff;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  box-shadow:
    0 8px 30px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.18);
  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.glass-btn:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.16);
  border-color:rgba(34,211,238,.55);
  box-shadow:
    0 10px 35px rgba(0,0,0,.28),
    0 0 20px rgba(34,211,238,.15),
    inset 0 1px 0 rgba(255,255,255,.25);
}

How This Glassmorphism Button Works

The Glassmorphism Button creates a frosted-glass appearance using a translucent background, backdrop blur, soft borders, and layered shadows. The HTML stays simple, using a standard button with a span for the visible “Hover Me” text.

The button uses rgba(255,255,255,.10) instead of a solid background color. This allows some of the colors behind the button to remain visible, which gives the surface its transparent glass-like appearance.

The frosted effect comes from backdrop-filter: blur(12px). Rather than blurring the button itself, this property blurs the content visible behind its translucent background. The -webkit-backdrop-filter version is also included for additional browser compatibility. You can learn more about this property in the MDN Web Docs guide to backdrop-filter.

A semi-transparent 1px border and inset highlight help define the edges of the glass surface. The outer box-shadow adds depth, while inset 0 1px 0 rgba(255,255,255,.18) creates a subtle highlight along the inside of the button.

On hover, the button moves upward by 2px, its translucent background becomes slightly brighter, and the border changes to a soft cyan tone. An additional cyan glow is also added around the button, making the interaction noticeable without losing the glass effect.

The .25s transitions smoothly animate the transform, background, border color, and shadows, keeping the hover interaction clean and responsive.

Customizing This Glassmorphism Button

You can customize the Glassmorphism Button by adjusting a few CSS values while keeping the same HTML structure. The transparency, blur strength, border color, button size, corner radius, and hover glow can all be changed to match your design.

  • Glass transparency: Change rgba(255,255,255,.10) to make the button more transparent or more visible.
  • Blur strength: Adjust blur(12px) to control how strongly the background behind the button is blurred.
  • Border appearance: Change rgba(255,255,255,.28) to make the glass edge softer or more noticeable.
  • Button size: Modify padding: 15px 34px to make the button smaller or larger.
  • Corner radius: Adjust border-radius: 12px for sharper or more rounded corners.
  • Hover glow: Change the cyan rgba(34,211,238,.15) shadow to customize the glow color and strength.

Where to Use This Glassmorphism Button

The Glassmorphism Button works well in modern interfaces where you want an action to feel lightweight and visually polished. Its translucent surface blends with the background while still keeping the button text clear and noticeable.

  • Landing pages: Use it for actions such as “Get Started,” “Explore,” or “Learn More.”
  • Hero sections: Works especially well over gradients, images, or colorful backgrounds.
  • Portfolio websites: Use it for project links, contact actions, or featured work.
  • Modern dashboards: A good fit for controls inside dark or layered interfaces.
  • App interfaces: Use it where a softer alternative to solid buttons fits the design.
  • Glass-style layouts: Ideal for interfaces that already use translucent cards, panels, or navigation elements.

Because the glass effect is created entirely with CSS, the button remains lightweight and does not require JavaScript for its visual interaction.

If you want another dimensional CSS button style, check out the 3D Press Button, which uses layered shadows and movement to create a tactile pressed effect.

Frequently Asked Questions

Does the Glassmorphism Button require JavaScript?
No. The glass appearance and hover interaction are created entirely with CSS using transparency, backdrop blur, borders, shadows, and transitions.

How does the frosted-glass effect work?
The button uses a semi-transparent background together with backdrop-filter: blur(12px), which blurs the content visible behind the button.

Can I make the glass effect more or less transparent?
Yes. Adjust the opacity in rgba(255,255,255,.10). A lower value makes the button more transparent, while a higher value makes the glass surface more visible.

Can I change the blur strength?
Yes. Change the 12px value in backdrop-filter: blur(12px). A larger value creates stronger background blur, while a smaller value produces a lighter frosted effect.

The Glassmorphism Button combines transparency, backdrop blur, subtle highlights, and smooth hover feedback to create a clean frosted-glass interaction. Its CSS-only design makes the component lightweight, easy to customize, and especially effective on colorful, gradient, or layered backgrounds.

Scroll to Top