How to give buttons a frosted glass effect in Squarespace

Feb 16

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

In this tutorial we’ll use some custom CSS to create a frosted glass buttons with a hover effect on your Squarespace website.

There is plenty in this code to customize, so be sure to watch the step-by-step code tutorial I created so you understand what parts of the code you’ll need to change to make it look amazing on your own site– codes listed below.

Download Transcript

Here is the code from the tutorial to create the frosted look for your buttons.

Play around with the background color (rgba) and blur (5px in the code below) to make it unique for your site design!

.sqs-block-button-element{
background: inherit!important;
background-color: rgba(255, 255, 255, .3)!important;
backdrop-filter: blur(5px)!important;
}

Let’s talk about code names!

The code above uses .sqs-block-button-element which works for on page buttons of all sizes. Change up that text to the name of the button you want to use!

Small on page buttons: .sqs-block-button-element--small
Medium on page buttons: .sqs-block-button-element--medium
Large on page buttons: .sqs-block-button-element--large