Discover a trio of methods for creating call-to-action buttons to tantalize your visitors.
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:
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://
orhttps://
. 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:
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.
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!
Currently blogless? You’re a click away from sharing your story.
Create your blog at WordPress.com
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.
LikeLiked by 3 people
Nevertheless, thanks for the post on this! I hope it’ll be useful for me!
LikeLiked by 1 person
You can definitely use the inline CSS method on the free plan. Try playing with different inline styles and see what you come up with!
LikeLiked by 2 people
Thanks Kathryn!
I’ll definitely try that in one of my next posts!
You definitely have many things to share. Would love to see you write more posts here!
LikeLiked by 1 person
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.
LikeLiked by 2 people
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.
LikeLiked by 1 person
Thank you. I will have a play around, and come back to the forums if I am stuck.
LikeLiked by 2 people
Done it.
LikeLiked by 1 person
Super. Looks great!
LikeLiked by 1 person
Cool post, also legos are the best!
LikeLiked by 3 people
wow ! really interesting. i didnt know it.
Even i research about development, and technology.
my page: https://technewspoint.wordpress.com/
LikeLiked by 1 person
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
LikeLiked by 2 people
Feel free to post in the Themes forum and we’ll be glad to help you with that!
https://wordpress.com/forums/forum/themes
LikeLike
yep me to
LikeLiked by 1 person
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!)
LikeLiked by 1 person
Hey guys..pls visit http://www.getupandressup.com
do show some love:)
https://getupandressup.com/2017/01/10/palmers-cocoa-butter-formula-body-lotion-review-your-winter-savior/#more-660
LikeLiked by 2 people
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?
LikeLiked by 1 person
Your button might contain code like JavaScript or an iframe that isn’t allowed on WordPress.com. Please contact support if you need more assistance.
LikeLike
That’s pretty neat. I didn’t know (I have two blogs) that Edin had a button like that!
LikeLiked by 1 person
Glad you discovered something new about Edin!
LikeLiked by 1 person
I really liked this post. And double points that a lady made a coding info article. Love it. Just to be clear, button options are not included in the free level of subscription? Thanks!
LikeLiked by 1 person
So glad you liked the post!
😀
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!
LikeLiked by 3 people
Great Post, Thanks for share.
LikeLiked by 1 person
nice… i really glad read this post
LikeLiked by 1 person
Thanks Kathryn P for this very useful information that may make a difference..hope it
does for my blog!
LikeLiked by 2 people
Glad you found it helpful – have fun experimenting!
LikeLike
I love that you Insire my to do better in my life
LikeLiked by 1 person
This is very helpful. I always wondered how that was done. So many web designers do not even know how to derive this. I will put it to practice. Thanks.
LikeLiked by 2 people
You give me new thing to learn and explore in my blog. Thanks.
LikeLiked by 2 people
Great information. Thank you.
LikeLike
Awesome post. Thanks,
LikeLike
In fond memory…
Whenever I come across pictures of puppies online, this immense grief , almost like a flaming dagger, strikes me hard.It makes me want to go back to …
LikeLike