5 ways to style eye-catching buttons [Squarespace 7.1 & Squarekicker tutorial]
5 no-code CTA buttons
Call-to-action buttons are one of the most important design elements of your website. This is where you can entice someone to buy / sign-up / join / learn more about your product and services. The two components of a good button are captivating style and draw-you-in copy. Below are 5 examples of exciting call-to-action buttons that will make people CLICK.
This tutorial utilizes Squarekicker, a fantastic paid plugin that helps you style your site with no code! Button styling is just a tiny part of what Squarekicker is capable of. If you want a next level design for your site, check Squarekicker out. There is a free trial if you just want to try it out.
No affiliate links here, I just love their product!
Style 1: Classy double border
This elegant button uses a double border to class up the CTA. Here we are using rounded corners on the bottom, but that can be easily adjusted to rounded at the top, rounded on all corners, or squared edges.
Want the shape to compliment the button? Using Squarespace’s built in shape changer (edit image > design > shape tab > 2:3 shapes) pick any shape with a flat bottom.
TUTORIAL:
Set your background color, font color, and border color. The border color should contrast the button color (here I’m using white). Change border to rounded on bottom or top, if you wish.
Set the shadow to 5px spread and 0 blur. Change color to same color as button.
Style 2: Two-color contrast pop
POP POP! (Community anyone?!)
Draw your customers to the most important parts of your page with eye-catching button. Customize with your brand colors or match to a colorful image.
