Create a Simple Call to Action Button

When I was designing the black&hue website I wanted to create a call to action button in several key areas of the homepage to help move visitors deeper in the site. What follows is an example of one of my call to action buttons.

Creating this button in your Squarespace site is relatively simple and only requires three lines of HTML code in a code block placed where you want the button to appear, and a few lines of CSS to style the button the way you want it to look. See Chapter 10 of my book, Squarespace 6 For Dummies, about how to add any blocks to your Squarespace site.

Step 1: Add the HTML Code

The first step in creating your call to action button is to add the HTML code that will display your button. Copy the HTML code below and place it in a code block on the page where you want the button to appear.

<div class="button-wrapper">
<a class="button cta-button" href="#">Button Text</a>
</div>

Make sure the code block is set to not display the code on your site and then you'll want to modifying the following in the HTML code you pasted in the code block:

  1. Replace the # with the page URL you want your button to link to.
  2. Remove the words Button Text and add the text you want to appear in your button.
  3. Advanced: Replace the cta-button class selector with your own selector that relates to the action of the button.

The advanced modification isn't necessary, but if you plan on having multiple call to action buttons on your site, you may want to give each button its own unique class selector so you can easily modify certain aspects of the buttons separately from each other. In the next step, I'll explain how using different class selectors can be beneficial.

Step 2: Add the CSS Code

The second step in creating your call to action button is to add the CSS code that will apply a style to your button. The CSS code will need to be added to the CSS editor window which you can open by going to Style Editor and clicking the CSS button at the bottom of the Style Editor column as shown in the following screenshot..

<img src="http://static1.squarespace.com/static/50dda4a6e4b03955129888bf/50dda4a6e4b03955129888c7/520cb7f7e4b0b43f797a808f/1376565239538/CSS_Button_in_Style_Editor.png" alt="Use the CSS Button in Style Editor to open the CSS Editing Window."/>

Adding CSS code is a little more involved than the previous step, but I'll keep things simple and explain as I go.

Step 2a: Button Wrapper

The first bit of CSS code you add will style the div wrapper to stretch the full width of the column it's placed in and center the button.

.button-wrapper {
display: block;
text-align: center;
}

Step 2b: General Button Styles

If you refer back to the HTML code you'll notice there are two class selectors. The first selector, button, will apply the general shape and design you want all your buttons to have on your site.

.button {
border: none;
border-radius: 3em;
box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
display: inline-block;
font-size: 1em;
padding: 1em 2em;
width: auto;
}

What I've provided is the basic CSS code to create a pill-shaped, or rounded, button with a hint of a drop-shadow behind it. It’s not necessary to declare the width as the button will size to the length of the text within it, but I left it in place in case you want to apply a set width. If you do want to apply a specific width, I would suggest setting the width in pixels (200px) or as a percentage (50%). Setting the width as a percentage will adjust the button width in relation to the width of the code block within your page. Finding the perfect width for your button is just a matter of trial-and-error.

Keep in mind that as your site is viewed on mobile devices Squarespace will automatically resize your code block to adjust to the width of the device’s screen. If you set your button to a pixel width, I would suggest keeping the button well under 320 pixels, the most common smaller mobile screen size.

Specific Button Styles

Remember, you have two class selectors in your button code. While the first selector, button, is used to apply the general style of your button, as you did in the previous section, the second selector is used to apply specific styles to the button for its intended use.

For instance, if you wanted to have multiple call to action buttons on your site, you may want to style these buttons with different colors, setting them apart from each other. To do this, I like to give each button a class selector unique to the button's action.

I like to use a common naming convention to help organize my code. Our example button uses a class selector cta-button where “cta” represents "call to action." If we had another button, say for example, a buy now button, we might would give this button a unique selector of buy-now-button.

You can choose selectors best suited for your site, but remember you will want to have two states:

  1. Inactive: the button as it appears before you click on or hover over your button with your mouse pointer
  2. Hover: the button as it appears when you move your mouse over it

The first selector below is our inactive state, while the selector with the :hover after it is our hover state.

.cta-button {
background-color: #yourButtonColor;
color: #fff !important;
}

.cta-button:hover {
background-color: #yourButtonHoverColor;
}

You'll want to replace the background colors with colors that match your site's design. If you need help picking a color for your button, refer to Style Editor in your site. It’s possible a color you have chosen for an element in your site will work for your button. See Chapter 7 of my book about picking colors in Style Editor.

The reason I added !important to the color of the inactive state is that the code we are using converts a normal text link into a button. By default, most Squarespace templates apply a color to text links which you can adjust in Style Editor. I added !important to override the color applied in Style Editor.

Below is the full CSS code for easy copying and pasting.

.button-wrapper {
display: block;
text-align: center;
}

.button {
border: none;
border-radius: 3em;
box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
display: inline-block;
font-size: 1em;
padding: 1em 2em;
width: auto;
}

.cta-button {
background-color: #yourButtonColor;
color: #fff !important;
}

.cta-button:hover {
background-color: #yourButtonHoverColor;
}

Conclusion

The CSS code I’ve provided will help you create a simple call to action button on your site. If you are familiar with CSS, you can add more styles to your button. I’d love to see what buttons you create on your site, so please share them in the comments section of this post or send me a private link via the contact page.

Additional Information

Source

Share

Kris Black

Kris Black is a user experience designer & developer building websites and mobile apps at truematter. Kris is also a partner at black&hue, specializing in building websites on Squarespace for small businesses, creative professionals, and entrepreneurs.

Learn more about Kris at his website.