How to give buttons a frosted glass effect in Squarespace

The frosted glass effect—also known as glassmorphism—has become a popular web design trend. It adds a semi-transparent, blurred background to elements like buttons or cards, giving them a modern and stylish look.

In this tutorial, you'll learn how to apply a frosted glass effect to buttons on your Squarespace website using a small amount of CSS. A plugin which gives such effect exists for the Newsletter Block.

Table of Contents

• Why Use a Frosted Glass Buttons

• Step-by-Step Instructions

• Key Takeaways

• FAQs

• Conclusion

Why Use a Frosted Glass Button?

• Enhances visual appeal with a sleek, modern design

• Improves readability on image or video backgrounds

• Helps CTA buttons stand out without clashing with other elements

• Great for luxury, creative, or tech-focused brands

Complexity: Intermediate

---

Step-by-Step Instructions

Step 1: From the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and add appropriate code into the Custom CSS editor box.

Note: This effect works best with the button over an image background.

//Frosted Glass Button Variables//
@button-color: #ffffff; // Change color for text
@button-color-hover: #fff001; // Change color for text on hover


//Frosted Glass Button Block//
.sqs-block-button-element {
background-color: rgba(0,0,0,0.1) !important;
color: @button-color !important;
backdrop-filter: blur(25px) !important;
-webkit-backdrop-filter: blur(25px) !important;
border-radius: 10px !important;
opacity:0.7 !important;
}

//Frosted Glass Button Block Hover//
.sqs-block-button-element:hover {
background-color: rgba(0,0,0,0.1) !important;
color: @button-color-hover !important;
backdrop-filter: blur(25px) !important;
-webkit-backdrop-filter: blur(25px) !important;
border-radius: 10px !important;
opacity:0.9 !important; 
}

To target particular button sizes which in this case are small, medium and large, simply use the following codes

/* Option 1*/
Small -> .sqs-block-button-element--primary {width: 150px}
Medium -> .sqs-block-button-element--secondary {width: 150px}
Large -> .sqs-block-button-element--tertiary {width: 150px}

/* Option 2*/
Small -> .sqs-block-button-element--small {width: 150px}
Medium -> .sqs-block-button-element--medium {width: 150px}
Large -> .sqs-block-button-element--large {width: 150px}

---

Key Takeaways

• The frosted glass effect uses backdrop-filter to create a blurred, translucent background.

• Adding a custom CSS class allows you to apply the style selectively.

• This effect enhances design sophistication and works best on image or video sections.

FAQs

Does this work on all browsers?
The backdrop-filter property works on most modern browsers, but older versions of Internet Explorer and some Android browsers may not support it.

Can I change the blur amount?
Yes! Adjust blur(25px) to any value. Lower = less blur; higher = more.

What if I want a dark frosted effect instead of light?
Change the background and border RGBA values to darker shades, e.g., rgba(0, 0, 0, 0.1) for the background.

---

---

Conclusion

Adding a frosted glass effect to buttons on your Squarespace site is a small change that can make a big visual impact. It’s easy to implement, customizable, and elevates your site's overall style with a trendy, elegant touch.

All work in this guide is provided ‘as-is’. Other than as provided in this agreement, this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of merchantability and warranty of fitness for a particular purpose.

If you require professional advice, we recommend that you purchase the services of a Developer.