×
Home About Us Our Services Blog

How to get Frosted Buttons - SquareSpace Tutorial

23 May 2020



This is a simple and very popular effect that you can add to your Squarespace sites. It will work for any 7.0 template and also for the newer 7.1 version as it is pretty much just a simple Custom CSS tweak.

Step 1

You want to get the CSS for your buttons using Inspect Element feature on browsers. If your website is live you can directly go to the website, right click and then click inspect element. If you’re still using a trial, copy the url of your website and paste it onto a new tab. After the slash add the following

/?noredirect

This will let you preview your site. Find you button, right click and then click inspect element.

Step 2

Copy paste the CSS into your custom CSS on your website (Design -> Custom CSS).

Step 3

First you will need to do is change the field after background-color to an rbga. So something like

background-color: rgba (0,0,0,0.15);

This will get you a black background with about 0.15 transparency. The last number in the brackets controls the transparency of your color, 0 being fully transparent and 1 being fully opaque.

Step 4

Now to add the blur/frosted effect. It’s a simple one line of code that goes like

backdrop-filter: blur (3px);

You can play around with the value that is inside the bracket for the color that you want.

Step 5

You want to make sure that this effect will work on the most number of browsers. To do that visit https://autoprefixer.github.io/ and paste your code in there. Copy and paste the result back into your Custom CSS and now you’ve got a cool effect in just seconds.

Here is a screen recording of me doing it on a trial website.