How to customize button styles and colors on Squarespace
Make your call to actions stand out from the crowd with a fully customized button on your Squarespace website. Change your button color on Squarespace with a few simple clicks using SquareKicker design and animation extension. Don’t stop there - add a fun border, change the shape, add a shadow, make your background vibrant, add some fun animations, and much more. Get click-worthy buttons styled to stand out with SquareKicker.
Can you customize the buttons on your Squarespace site?
In Squarespace site styles you can design a primary, secondary, and tertiary button style that will appear across your site. You can modify the shape, outline, text, and some other elements to make on-brand and elegant looking buttons.
If you want an elevated button that immediately catches the eye, you might want to make a completely custom button, with simple yet enticing hover effects.
Change the button color in Squarespace
Make your buttons pop with bold, custom colors! Most of the buttons across your site will be styled in the same way for cohesion, but you might want to customize specific buttons with a unique color. You can have two different colored buttons in the same section to maximise impact.
Open SquareKicker on one of your buttons
Select background and then color
Choose a color from your SquareKicker color palette or create a one-off custom color
Add a button shadow and hide it on hover
Give your button a stylish and contemporary look with a shadow that lifts the button off the page. Take it to the next level with a simple hover effect that hides the shadow.
Open SquareKicker
Select background and make your button background transparent
Return to the Design menu and select shadow
Style the size of your shadow with the spread slider
Customize the position of the shadow with the vertical and horizontal sliders
Navigate to the lightning bolt in the top right corner and enter hover mode
Lower the spread to 0xp to hide the shadow on hover
Create a colorful background with gradient
Make your Squarespace buttons pop with colored gradients. Have a different color show on hover to grab your visitors attention when they mouseover. Add gradients to one of these backgrounds for a dazzling CTA.
Open SquareKicker
Select background
Choose a color for gradient top and gradient bottom
Use the slider to change the gradient direction
Navigate to the lightning bolt in the top right corner and enter hover mode
Choose a background color
Animate your Squarespace buttons
Animate your button with a subtle change to the position of the button on hover. A 5% vertical shift in position makes your button interactive with a subtle “bob” and adds movement to the page in a pleasing way.
Open SquareKicker
Navigate to the lightning bolt in the top right corner and enter hover mode
Adjust the vertical position of the button block to 5% with the slider
How to change the font on a single Squarespace button
A very simple way to quickly customize your button and make it unique to your brand is to change the font using SquareKicker. Squarespace site styles allow you to set the font for buttons across your site but if you want a particular button to make a statement, grab a memorable font for just this button. You can also change the size, colour, font weight, line height, and letter spacing to achieve the exact effect you want.
Open SquareKicker
Select font under the Design tab
Choose a dramatic font
Modify other font settings to create typography that looks great
Optional: modify the font settings in hover for an even more dynamic look
Make your button bigger on hover
This effect will increase the size of your button on hover so it feels like you're zooming in. This is a great way to draw attention to a particular button.
Open SquareKicker and style your button
Navigate to the lightning bolt in the top right corner and enter hover mode
Select effects
Play with the size of your button by modifying scale with the slider. Try up to 110%.
Return to the Design tab and set a different background color for hover state to enhance this effect. To make this animation less jarring, choose two shades of the same color.
Rotate your button
Give your site some personality with this creative effect. Choose the angle of rotation and combine with hover effects to make your buttons distinctive.
Open SquareKicker
Select position
Use the slider to rotate the button. Alternatively, turn on hover mode and adjust this setting so your button rotates on hover.
Be bold with a playful border
A border will give your button a polished look and is another way to add color to your site. With SquareKicker you can choose a dashed, dotted, or solid border. You can also round the corners for a softer look.
Open SquareKicker
Select border
Play with the style, color, and size to achieve the look you want
Another exciting effect you can create with a border is to combine it with a transparent background and a shadow for an elegant button that stands out while blending seamlessly with your brand.
Animate and customize your pill shaped button
In Squarespace site styles you can choose to make buttons across your site pill shaped with soft, rounded corners. The pill button adds a refined and modern aspect to your website while softening hard edges. SquareKicker design extension elevates your pill button with hover animations and other customizations.
Open SquareKicker
Select border
Increase rounded to 100px
Choose which corners to round
Apply other border effects to your button
Optional: turn on hover mode and complete the above steps in hover state to create a dynamic button
Make your Squarespace button transparent
Combined with border and shadow tools, a transparent background on your Squarespace button will create a contemporary look. Embrace your section background by making your buttons transparent.
Open SquareKicker
Select background and choose a transparent color from the color picker
Return to the Design menu and customize your border
Add a shadow to make your button pop
