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

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!

css button codes.jpg

LOOKING FOR MORE?

GET ACCESS TO OVER 20+ BUTTON STYLES