Creating Gradient Buttons with CSS


 
Gradients are a popular design style these days and totally possible in Squarespace with some creative CSS! Check out my tutorial video below on how to change solid color buttons to gradient ones using Custom CSS on your Squarespace website


SUPER IMPORTANT NOTE

This code are for Bedford and Brine family templates, but can easily be updated for other theme families. If you aren’t sure which template you are using, My Getting Started with CSS guide can help! Download it for free here on my site:

CSS Code for Changing All Buttons

.sqs-block-button-element {

background: #ffffff;

background: linear-gradient(to right, #000000, #ffffff);

}

CSS Code for Small Gradient Buttons

.small-button-style-solid .sqs-block-button .sqs-block-button-element--small{

background: #ffffff;

background: linear-gradient(to right, #000000, #ffffff);

}

CSS Code for Medium Gradient Buttons

.small-button-style-solid .sqs-block-button .sqs-block-button-element--small{

background: #ffffff;

background: linear-gradient(to right, #000000, #ffffff);

}

CSS Code for Large Gradient Buttons

.small-button-style-solid .sqs-block-button .sqs-block-button-element--large{

background: #ffffff;

background: linear-gradient(to right, #000000, #ffffff);

}

If you have tried this code on your own site, let me know in the comments below!