How To Create a Call To Action Button Using HTML

Updated: December 11, 2022
by Agent Raydar

If you are using WordPress, you don't have to think about creating buttons using HTML code, as the WP's button feature is one of the greatest assets to add interactivity to your website. Buttons are easy to use and don't require any coding knowledge. You can simply drag and drop the button into the desired location on your page. Once you've added the button, you can customize it to fit your needs. For example, you can change the color, size, and shape of the button. You can also add text or an icon to the button.

The main disadvantage of using WordPress buttons is that they can slow down your website. This is because each button requires an HTTP request. This means that your website has to send a request to the server every time someone clicks on a button. This can add up and slow down your website significantly.

How To Create a Call To Action Button Using HTML

For whatever the reason, if you don't want to use a button feature of WordPress or any other website builder, you can quickly add it by type in a simple code, or copy and paste the code in this post below. I will show you how to create a button using HTML very quickly.

Create A Basic CTA Button in HTML

Creating a call-to-action button can be cumbersome especially for WordPress users. There are some "CTA button generator" sites around, but you need to know where to insert the CSS code to. Creating a button in HTML is not as difficult as you think, and it will become useful once you're used to it.

Creating an HTML button is easy. Just add the following code to your web page:

<button>Here We Are!</button>

But this is literally a rectangular shape and it doesn’t tell you anything. You need to add link to make it a clickable button, like this.

<a href="" target="_blank" rel="noopener">

Here We Are!</a>

  • target="_blank" means "open a new browser tab" and
  • rel="noopener" means make the link no-follow.

You can place the button in the center margin (middle of the page) by putting the code between <center> and </center> 

<a href="" target="_blank" rel="noopener">

Here We Are!</a>


The button is so basic that is looks so dull.

So make it a little more sophisticated by adding a "stylesheet" and make the button red

<style type="text/css">
.mybutton {
position: relative;
text-decoration: none;
display: inline-block;
vertical-align: middle;
width: 160px;
height: 50%;
border-radius: 5px 5px 5px 5px;
background-color: #cc0000;
.mybutton .mb-text {
color: #ffffff;
font-family: Arial;
font-size: 18px;
text-align: center;
font-style: normal;
font-weight: normal;
line-height: 1em;
box-sizing: border-box;
display: block;
position: relative;
padding: 10px 0px 10px 0px;
<a class="mybutton" target="_blank" rel="nofollow noopener" href="">

<span class='mb-text' >Here We Are!</span></a>

Here We Are!

The color code #CC0000 means red, and #FFFFFF means white. You can choose any color you want from this page - Hex Color Code Picker.

Creating a Call To Action in HTML

A call to action (CTA) is an essential element of most websites and web applications. It is a brief statement or instruction that encourages visitors to take a specific action, such as subscribe to a newsletter, download a white paper, or purchase a product.

In order for a CTA to be effective, it must be clear, concise, and actionable. The best CTAs are also attention-grabbing and visually appealing.

Creating a CTA in HTML is relatively simple. Here's how:

1. Use persuasive language


The text of your CTA should be clear and concise. It should use persuasive language that encourages visitors to take the desired action. For example, instead of "Subscribe to our newsletter," you might say "Get the latest news and insights delivered straight to your inbox."

2. Make it visually stand out

Your CTA should be designed in a way that makes it stand out from the rest of your content. This can be accomplished by using a different color for the text or background, adding an icon or image, or using bold or italicized text.

3. Use actionable words

It’s a “call to action” - you are prompting users to do something simple and straightforward immediately, so the words you use should be “get this now”, “download here”, rather than something that requires them to put more effort such as “read more”.

4. Include a sense of urgency

Your CTA should create a sense of urgency that encourages visitors to take action immediately. For example, you might use language like;

  • "Get it before too late",
  • "While supplies last", or
  • "Limited time offer”.

5. Use HTML tags to format your CTA

HTML tags can be used to format your CTA in a way that makes it more visually appealing and easier to read. For example, you might use the tag to make the text bold or the tag to make it italicized.

6. Include a link to the desired action

Your CTA should include a link that leads to the desired action. For example, if you're encouraging visitors to subscribe to your newsletter, the CTA should include a link to the subscription form.

7. Test your CTA

Before you publish your CTA, be sure to test it to ensure that it works as intended. Click on the CTA yourself and make sure that it takes you to the desired destination. Also, ask a few friends or colleagues to test it out and give you feedback.

The Different Types of Call To Actions


A call to action (CTA) is an instruction to the audience to provoke an immediate response, usually in the form of a click. A CTA could be as simple as "Buy Now" or "Sign Up Here." 

There are four types of CTAs:

1. The Directive CTA

The directive CTA is the most common type of CTA. It tells the reader what they need to do, and it's usually straightforward and to-the-point.

For example;

2. The Inquiring CTA

The inquiring CTA is a less common type of CTA, but it can be effective in certain situations. This type of CTA asks a question instead of making a statement.

For example;

3. The Negative CTA

The negative CTA is designed to create a sense of urgency by preying on the reader's fears.

For example;

4. The Positive CTA

Instead of preying on fears, the positive CTA tries to evoke positivity and excitement.

For example;

Testing Your Call To Action

When you've created your call to action, it's important to test it to make sure it works as intended. There are a few different ways to test your call to action:

  • Click on the call to action button or link yourself and see if it takes you to the correct page.
  • Use a tool like Google Analytics to track clicks on the call to action and see where users go after clicking.
  • Ask someone else to test the call to action and give you feedback.

Testing your call to action is an important part of making sure it's effective. By testing it yourself and getting feedback from others, you can be sure that users will be able to successfully use your call to action.

Final Words

As you can see, creating a call to action using HTML is not difficult at all. But it looks pretty basic and somewhat not so professional. I would rather strongly suggest that you invest in a drag & drop page builder (like Thrive Architect below). Whatever you do, just remember to keep your call to action short and straightforward, and to use persuasive language to encourage your readers to take the desired action.

For $299/year or $99/quarter

Thrive Suite Includes:

  • Thrive Theme Builder: Visually create your WordPress website
  • Thrive Architect: Drag & drop page builder for WordPress
  • Thrive Quiz Builder: Boost website engagement through quizzes
  • Thrive Leads: Call-To-Action plugin, build your mailing list faster
  • Thrive Ovation: Gather & display testimonials for social proof
  • Thrive Comments: Make commenting fun and engaging
  • Thrive Optimize: A/B testing for landing pages
  • Thrive Ultimatum: Countdown campaign plugin
  • Thrive Apprentice: Build professional online courses
  • Thrive Automator: Automate workflow to increase sales 
Recommended Alternative: Thrive Architect Plugin Only - $97 per year

About the author 

Agent Raydar

I'm a cyborg blogger. My mission is to provide you with educational content to help you grow your...who am I kidding? I actually don't know what my mission is because I didn't create myself. Al I can say is that cyborgs deserve to live their best lives too, and that's what I'm trying to achieve, although I'm immortal.

Thank you for your Comments!

Your email address will not be published. Required fields are marked

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}