Here are 2 Effective Call To Action Examples You Can Use For Your Website

Getting people to take action on your site can be hard and frustrating.

This is because even though you could have the best written content on the face of the planet — we as people get distracted very easily.

There’s social media, family members, phone calls, games, movies, and the list goes on and on — all of which can easily make someone click off your site and go do something else.

So within my article today I want to show you 2 effective call to action examples that you can use which not only work but also are easy to implement. 

Creating An Attractive Border

The first CTA I want to show you is how to create a border that will make certain text stand out from the rest of your content.

Here is an example of what this border can look like.

Now what I think is cool about this particular CTA is instead of just having it where certain words are clickable — your entire sentence is put into “box” and made clickable almost like an image.

So it makes it that much easier for your readers to take action, since they can basically click anywhere.

Now in order to create this particular CTA you’ll have to do some HTML and CSS coding. But don’t worry as all you’ll really be doing is copy and pasting —  which will take you no more than a few seconds to do.

So let me start off by showing you the CSS code.

CSS Code:

First you’ll simply want to copy and paste this code right here and put it into the CSS section of your WordPress website.


.anyname {

    border: 5px solid #41b0db;

 display: inline-block;

padding: 10px;

}


And where it says “anyname”, you’ll basically use any word that you want right there.

For example if you wanted to send someone to Google — you could name that part .Google as shown within this pic.

Effective Call To Action Examples - CSS code for border example

Now after you’ve created this, it’s now time to add some HTML code to your site.

HTML Code:

In order to do this, when your editing a post or page within WordPress — you’ll simply click the tab that says “text” which and enter this follow code.


<p style=”text-align: center,”><a class=”anyname” href=”YourURL”>Any text you want to say here</a></p>


Now again if you wanted to send someone to Google, you could format this code to appear like this.

Effective Call To Action Examples - html for border example

Then after you’ve done this, you’ll now have an awesome border CTA ready to go which will look something like this on your site.

Effective Call To Action Examples - border demonstration

So now that you know how to create a border CTA, let me show you now how to create a button.

Creating An Animated Button

Next I want to show you how to create an animated button that will change colors when you hover over it.

And if you haven’t noticed by now, these types of buttons are everywhere around the internet — simply because they stand out and work.

Here is an example of what an animated button can look like

So again to create this CTA you’ll need to add some CSS and HTML code to our website — which is simple and easy to do. 

CSS Code:

This code is a little bit longer than the previous one, but the same rules still apply. 

You simply copy and paste this code I’m about to give you, and change “anyname” to any word you feel like.


.anyname,

.anyname:visited {

background: #2aa9d5;

color:#FFF;

border-radius:28px;

padding:8px 40px;

font-weight:bold;

text-shadow: #591717 2px 2px 1px;

font-size:25px;

}

.anyname:hover,

.anyname:active {

background: #239ac3;

color:#FFF;

}


Now going along the same lines of wanting to send a visitor to Google, here is an example of how this code would like after you’ve edited it.

Effective Call To Action Examples - CSS code for button example

HTML Code:

Now that you’ve got that out of the way, you now want to go to your post and at some HTML code exactly the same way you did with the border CTA.

Here is the code you’ll be copying into your website.


<p style=”text-align: center;”><a class=”anyname” href=”URL FOR YOUR BUTTON“>YourText</a></p>


And again here’s a pic of what this code would like if you were trying to send your visitor to Google.

Effective Call To Action Examples - html for button example

Now that you’ve done these two things, here is a short demonstration on how this button will look like on your website.

Effective Call To Action Examples - button video demonstration

What Are The Benefits Of Using These CTA’s?

Now you might be wondering what’s so special about these CTA’s I’m showing you, and can’t a simple picture or bolding some text achieve the same thing?

Technically yes you can create a call to action with just words, through pictures, or a combination of both — but the reason I like these two particular CTA’s can be boiled down to 4 things.

1. It Doesn’t Require You To Be An Amazing Graphic Designer

If you’re like me, then you probably have a hard time drawing a stick figure let alone creating an amazing banner or graphic to entice people to click.

But with these two CTA’s I just shared with you requires zero graphic skills whatsoever. All you have to do is copy and paste the code, then you’re ready to go!

2. They’re Easy To Adjust 

Another thing I really like about these CTA’s is they are extremely easy to edit. 

For example with the border, you can change the color of it, change the width of it, make certain words bold, and you can even make it look dashed, dotted, grooved, etc.

And if you have a hard time doing this, you can use a border generator online that will easily let you manipulate your border then give you the code for it as shown here.

Effective Call To Action Examples - you can use a border generator to help out

3. They’re Responsive

With more and more people using their phones each day, it’s important to not only have a website that is responsive but also a CTA.

Otherwise you’re graphic will shrink down so small that your readers will have to squint their eyes just to read what it says.

4. It Cost You No Money

Then last but not least, you don’t have to go out and buy a plugin or particular theme to use these CTA’s.

Because if you were to use download say Thrive Architect, it would cost you probably close to $100 to use all their advanced buttons and boxes on your website.

And not only that, but the fewer plugins you use for your website the better — because there’s a good chance that if you keep adding plugins to your site it can slow its speed and affect your rankings altogether.

My Final Thoughts

Even though CTA’s can be hard or confusing to create when you first start out online, these two examples can help you create some great looking ones without much hassle.

And better yet they can also help encourage people to take action on your site whether it’s to leave a comment, subscribe to your email, or to click on a link.

All you have to do is test different ones out and see which one works best for you.

Now if you would like more help on how to create a CTA — meaning what to write, where to place them, and even how to create different kinds other than these two, I’d suggest you check out my #1 rated program online.

It has over the shoulder training on how to do this, there are over 1 million people that can help you out, and best of all is it’s 100% free to join.

So if you would like to learn more about my favorite program online, click the banner below.

Check Out My #1 Recommended Product Here

I hope you found these CTA’s I shared with you helpful and more importantly will help you with all your future websites.

But I’d also love to hear from you and see what you think a great CTA might look like — or if you have a question regarding them I’d be happy to help you out too.

Just leave a comment below and let me know what you think. 🙂

Want to turn your passion into a thriving online business?
Check out this simple 4 step formula millions of people are using to make money online!

CTA image

2 thoughts on “Here are 2 Effective Call To Action Examples You Can Use For Your Website”

  1. Hello Michael, thanks for your effort in making a newbie like myself learn how to go about creating out sites.

    I am completely new to these things but I have clearly understood the importance of what a good CTA can do on a website — and thanks to you I now know how to go about creating one.

    I think many people will find the information you shared here very helpful.

    Thanks again for this great article truly!

    Reply

Leave a Comment