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.

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

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.