Build Your Own Business Website header image

How to Style Typical Submit, Read More and Call to Action Buttons in Agility

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Next we are going to look at how you style the typical submit, read more and call to action buttons in the Agility Skin for Thesis Theme 2. These buttons are all styled the same and have the same styling options.

Call to Action Button

This is an example of the call to action button. It’s the button inside the call to action.

Read More Button

This is an example of the read more button. It’s the button that follows an excerpt in these kinds of situations. This is also a call to action button.

Submit Button

We’ll have to create a submit button because I don’t see one here on the site. To do that we go to Appearance and Widgets. Then in our main sidebar widgets add the search widget in there. A typical submit button is a search button. Also if you’re using Gravity Forms or Contact Form 7 for a contact form, that button also gets styled like a submit button.

Rationale for Three Different Types of Button Styling

The underlying rationale for having three different types is that I assume that the possibility exists that you will want your call to action buttons to stand out and look different from every other button. The submit button should also stand out separately.

The read more buttons just need to be evidently a button and artistically pleasing but they don’t necessarily need to call that much attention to themselves or to set themselves apart. So that is the rationale for having three different styles.

Where to Find the Styles

In order to style any of those you come back over to Skin Design and again, it’s in the font style options. Open that up and come down here to the bottom where we’ve got the typical submit button, typical read more button and call to action submit button.

Styling Options Available

As I said, these all have the same options. So you can select a font family. Let’s pick Arial Black in this case. You can select a font size. Let’s pick 32 for that. We’ll leave the line height alone for the moment.

You can choose color. We’re going to make the link color essentially white, that’s the text color. For the background color we’re going to choose medium contrast. Then the hover text will stay white and let’s make the hover background color a dark color.

Then in terms of padding, the default padding is 10 pixels top and bottom and 20 pixels left and right. Let’s just change that to 20 top, 30 right, 20 and 30.

Let’s look at some of the additional font style options. We a’re going to add a 2px letter spacing for that and then we’ll add a border of 2 pixels.

Call to Action Button Example

Actually, let’s re-do that. Come back over here to manage skins and update. Here we go. We’ll select Arial Black as our font family. Go to 32 pixels as our font size. Leave line height alone but we’re going to open up submit button colors. Use all white for the text.

For the background we’ll use dark contrast. I’m just getting ahead of myself here. Link, link. So the hover text color is also going to be light and the hover background color will be a light contrast. Instead of white let’s make it medium dark.

Then we’ll come down to our padding. The typical padding for all of the buttons is 10 pixels top and bottom with 20 pixels left and right. We will bump that up to 15 pixels top, 30 pixels right, 15 and 30.

Let’s add some additional font style options. Come down here to letter spacing and call it 2px.

Then we’re going to add a border and we’ll make that border solid. Add two pixels for width and then we’re going to choose from our border color. A medium contrast will look good as our border color.

Then we give ourselves a 10 pixel border radius with a medium dark border shadow. Keep that at 3px, 3px, 3px offset. For our opacity we’ll say 0.5.

We’ve made quite a few changes to this call to action submit button. Let’s save our font options and come back to the site to take a look. Well, that’s a big change. Obviously I wouldn’t do it quite like that but nevertheless you can see the contrast with the read more button. And that’s how you change the button styles.

0 Comments… add one
0 comments… add one

Leave a Comment