Jan 11, 2017 / Intermediate

A Call to (Button) Action

Discover a trio of methods for creating call-to-action buttons to tantalize your visitors.

control button

Have you ever heard the phrase “call to action” and wondered what it meant? In web terms, a call to action is usually an enticement for someone to visit a link, and that link is often designed to look like a button, ready to be clicked. Maybe you’d like visitors to head straight to your Services page? Or maybe you’d like them to check out your latest recipe, or sign up for your newsletter?

No matter where you’d like your visitors to go, there are a few different ways to make call-to-action buttons on WordPress.com — let’s look at each one.

Tips
  • Don’t forget that buttons can also go inside a text widget!
  • New to CSS? Check out our beginner’s guide, which includes links to more resources.
  • If you need more help crafting your CSS, expert volunteers and WordPress.com staff our ready to help over in our friendly CSS Customization forum.

Built-in button styles

Some themes come with button styles built into the theme, which you can apply to a regular link by switching to HTML view in the post or page editor, and adding the theme’s special CSS style — called a “class” — to the link, which is also known as an anchor tag.

For example, the theme Goran comes with a button style called (get ready for it!) button — and you can add that class to a link, to make it look like this:

goran-button

This is what the HTML for the button on the demo looks like:

<a class="button" href="https://gorandemo.wordpress.com/">Button</a>


If you visit the Goran demo, you’ll notice that the button background changes color whenever you put your cursor over it on a desktop or laptop computer — that “hover state” is also defined by the CSS within the theme.


You can find out whether a theme comes with a built-in button style — and what specific class name you should add to your anchor tag — by visiting its showcase documentation. You can see a couple of examples of ready-made call-to-action button styles in Edin, Gateway, Sequential, Pique, and Karuna.


Your theme doesn’t come with predefined button styles but you’d still like to create your own button? No worries, we’ve got you covered.


There are two ways to make them — we’ll look at those techniques next.


Custom CSS button styles


If you have Custom Design — included with the Premium and Business plans — you can add your button styles to your Customizer’s CSS panel.


For example, here’s some basic button styling:


.button {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 6px;
  border: 0;
  font-weight: bold;
  letter-spacing: 0.0625em;
  text-transform: uppercase;
  background: #615f8b;
  color: #fff;
}
/* Add a rollover background colour but keep the text white */
.button:hover,
.button:focus,
.button:active {
  background: #b7b6cd;
  color: #fff;
}



The HTML part for the anchor tag would look very similar to the first example:


<a class="button" href="YOUR-LINK-HERE">Sign up for my Newsletter</a>


Just replace YOUR-LINK-HERE with the full URL (web address) for the page you’d like visitors to go to, starting with http:// or https://. For example, if you’d like visitors to go to your newsletter signup page, you can add its URL.


Here’s what this example would look like on your site:


button rollover screenshot


You’ll notice that the button text is in capital letters, and that’s because we’ve specified uppercase in this line of the CSS:


text-transform: uppercase;


If you prefer not to have it in all caps, just remove that line and it’ll default to a mix of upper and lowercase, exactly as you typed the text.


By keeping the HTML and CSS parts separate, you can easily add the same button class to multiple buttons, keeping them all consistent, and avoiding repeating the CSS more than once. It also means that if you decide to change something later — say, you’d like all your buttons to have an orange background because it’s October and Halloween is approaching — you can do that in just one place in the CSS, without needing to touch the code anywhere else.


Inline CSS button styles


If you don’t have Custom CSS, there is still a way to create a link with basic button styling, by using what’s called “inline styles.” That means you mix your button CSS directly within your HTML code. You’ll need to flip your editor to HTML view to add the code.


Here’s an example:


<a style="display: inline-block; padding: 12px 24px; border: 0; border-radius: 6px; font-weight: bold; letter-spacing: 0.0625em; text-transform: uppercase; background: #615f8b; color: #fff; text-decoration: none;" href="YOUR-LINK-HERE">Call to Action</a>


There are a few disadvantages to this method: the code is harder to look at and troubleshoot, and you need to repeat all the inline CSS on every button you create, so it’s more cumbersome if you want to change anything later. You also can’t add a rollover (hover) state this way.


Here’s a working button with the inline CSS from above. If you’re on a desktop or laptop computer, try hovering your cursor over it to see how there’s no change in the styling.


Explore the Daily Post


Buttons ahoy


I hope this gets you started on your own call-to-action adventure. And if you need a hand with anything, we’ll be glad to give you an assist in the forums!





	Show Comments
	
32 Comments

	

		
    
								
  1. 
				
			
    2. 
						
  2. 
				
			
    3. 
						
  3. 
				
			
    4. 
						
  4. 
				
			
    5. 
						
  5. 
				
			
    6. 
						
  6. 
				
			
    7. 
						
  7. 
				
			
    8. 
						
  8. 
				
			
    9. 
						
  9. 
				
			
    10. 
						
  10. 
				
			
    11. 
						
  11. 
				
			
    12. 
						
  12. 
				
			
    13. 
						
  13. 
				
			
    14. 
						
  14. 
				
			
    15. 
						
  15. 
				
			
    16. 
						
  16. 
				
			
    17. 
						
  17. 
				
			
    18. 
						
  18. 
				
			
    19. 
						
  19. 
				
			
    20. 
						
  20. 
				
			
    21. 
							

	


	
Comments are closed.
Close Comments

Comments

  1. I guess CSS styling should be allowed in the free plan. At least to add buttons.
    Also, if monetisation is allowed in the free plan, it’ll mean the blogger could earn some money which he can party use to purchase a higher plan.
    Also, right now monetisation options are limited for free plan holders because JavaScript is also not allowed on WordPress. That’s a big disadvantage.

    Liked by 3 people

  2. I don’t have CSS, but use widget images to link to certain sites, so visitors may click the image to go to the site. Could I add a button to widgets? (I will ask on the forums if you would prefer.) I see your inline CSS button which does not change style still changes my cursor to a pointing finger, which is probably enough change to be going on with.

    Liked by 2 people

    1. To add styles to an image widget, you would need custom CSS. If you added your buttons to a text widget instead, you could then use the inline CSS method. If you need help with either route, feel free to post in the forum and we’ll be glad to lend a hand with more specifics.

      Liked by 1 person

  5. Not totally sure what you just wrote about..but ehh!! More knowledge could not hurt…the only buttons i think i got ate like twitter etc and i still cannot figure out how to delete a couple of them

    Liked by 2 people

  7. Thank you for this. I’m currently trying to get votes to win a major travel bloggers trip and despite getting lots of views I just can’t get people to click “vote”. I’ve added a button (in call-to-action yellow!) to several of my posts now. I’ve also added a widget – thanks for the reminder!
    (And if anyone would like to help me, the voting link is http://season4.keralablogexpress.com/index.php/user/single_participant/93. Any votes would be HUGELY appreciated!)

    Liked by 1 person

  9. I have a shopify shop and they do call to action buttons to buy my products. I have generated a code and pasted into the HTML of the page but nothing happens. Why is that?

    Liked by 1 person

    1. So glad you liked the post!

      And double points that a lady made a coding info article.

      😀

      Just to be clear, button options are not included in the free level of subscription?

      You can use the inline button styling option (third method) with the free plan, or if you use a theme that has a built-in button style, you can add the `button` class to your link and get the default button styling for that theme.

      I see that you’re using Karuna, which does include a button style. Check out the showcase page for details (scroll down to “Button Styles”) and feel free to post in the Themes forum if you need further help!

      Liked by 3 people