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.
Style 3: Curved to Straight
Style 4: Gorgeous gradients
Style 5: The Magic Button
How to create rotating images in Squarekicker
SquareKicker tutorial for Squarespace designers.
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
Don’t worry about sounding professional. Sound like you. There are over 1.5 billion websites out there, but your story is what’s going to separate this one from the rest. If you read the words back and don’t hear your own voice in your head, that’s a good sign you still have more work to do.
Be clear, be confident and don’t overthink it. The beauty of your story is that it’s going to continue to evolve and your site can evolve with it. Your goal should be to make it feel right for right now. Later will take care of itself. It always does.
How to create overlapping image boxes with Squarespace & Squarekicker
Squarespace tutorial on changing color of text on hover.
What you’ll need for this tutorial:
Haven’t heard of Squarekicker? Here’s a brief summary:
Squarekicker is a beautiful little plugin that lets you make HUGE changes on your Squarespace website. Why we love SK:
1. Plans start at just 12/month
2. If you decide to cancel your sub, you get to keep any changes you made
3. New updates and features often
We are not an affiliate of Squarekicker, we just love and use their product.