How to add an icon or arrow to the buttons on your Squarespace Website
I love the simplicity and ease of Squarespace, but it is true that the “off the shelf” options can get a little samey.
Squarespace has a few button options.
Different shapes (pill, rounded, rectangular) and styles (outline and bold), and with the various different animation settings you can create some pretty fun hover effects too!
But you might want to jazz things up a little more to bring your buttons on brand with the look & vibe of your site and to make your CTAs really sing!
I often add a little something to the buttons on my websites - and here’s how to add an icon or arrow to the buttons on your Squarespace Website!
Let’s hop to it!!
Pst .. before we start - if this post gets you code curious - check out this Free Workshop from my mentor Rache where she breaks down what makes a standout site, how you can unlock creativity & confidence through code and gives you a peek behind the curtains of the course that taught me everything I know about using code on Squarespace!
This post contains affiliate links. If you make a purchase via one of these links I may get a small kickback. I only recommend products and services I use and love myself!
CSS snippet to add an arrow to your CTA buttons on Squarespace
Add this CSS snippet to the CSS panel in the design section of your site.
///ARROW ADDED TO BUTTON///
.sqs-block-button-element:after {
content: '➔';
padding-left: 10px;
margin: 0px 0px 0px 20px;
color: #fff !important;
}
Less of a DIYer and want someone to do it for you?
You can grab a power hour with me to solve some of your Squarespace niggles…
adding icons to specific buttons
You can apply this CSS snippet specifically to small, medium, large or all buttons by adding “--small”, “--medium” or “--large” in the snippet after the word element.
If you would like to apply the CSS snippet to only one button or section you can apply it to the block ID of that block, or section ID of that section only.
CSS to add button styling to only one type of button
///ARROW ADDED TO SMALL BUTTON///
.sqs-block-button-element--small:after {
content: '➔';
padding-left: 10px;
margin: 0px 0px 0px 20px;
color: #fff !important;
}
///ARROW ADDED TO MEDIUM BUTTON///
.sqs-block-button-element--medium:after {
content: '➔';
padding-left: 10px;
margin: 0px 0px 0px 20px;
color: #fff !important;
}
///ARROW ADDED TO LARGE BUTTON///
.sqs-block-button-element--large:after {
content: '➔';
padding-left: 10px;
margin: 0px 0px 0px 20px;
color: #fff !important;
}
You can also change the colour by switching in the hex code to one of your brand colours if you like!
Looking for more plugins to jazz things up? Here are 21 of my fave FREE Squarespace plugins!
Finally - you can mix it up by choosing a different icon, even one different one for each button size if you fancy it - the world is your oyster!!
Copy and paste one of my favourites below, or search for your own at https://coolsymbol.com/ (I’m loving this 70s flower on Jazzy orange!) but here are another few examples…
✩ ✏ ↩ ✿ ❆ 》⫸
This tutorial got you code curious?
Check out the incredible free workshop from my mentor Rache at Square stylist - not only will she break down the basics of CSS, she’ll actually build a whole homepage with you!!
New on the ‘Gram…
