How to give buttons a frosted glass effect in Squarespace

This tutorial shows you how to use some custom CSS to create a frosted glass buttons with a hover effect on your Squarespace website. A plugin which such effect exist for the Newsletter Block.

Complexity: Intermediate

From your Squarespace account, go to the Custom CSS Editor. paste the 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 buttons sizes which in this case are small, medium and large, simply use the following codes

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

All work in this guide is provided ?“AS IS”. Other than as provided in this agreement, this guide makes no other warranties, express 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.