Create Clickable HTML Buttons inside the WordPress Posts and Pages

Ever wondered how to create this type of Clickable HTML Buttons (Like the image below) inside the WordPress posts and pages?

HTML Clickable Button Example

Here is the best way to do it…

Inserting the HTML Code inside WordPress Posts and (or) Pages

To insert any kind of code into your WordPress website, you can use button (<button> </button>) tags in order to put HTML codes into it.

First, log in to your WordPress website and open the post/page that you want to create the button in. After opening the post (page), provide any title to the post (page) and then go to the text mode instead of visual mode. As shown in the image below.

Open WordPress Post and Then Go to the Text Mode

Make sure that you’re in the text mode and then you can write the HTML code for inserting the button.

  • Clickable HTML Button Without CSS

<a href="">
<button> This is an example of HTML Button </button>

You can add a simple HTML clickable button by writing the above code. Above is the example of a simple and non-decorated HTML button. You can copy the above code, then replace the with your domain name and This is an example of HTML Button with the text what you wanna show on the button.

HTML Button Without CSS

After you insert the above button code inside your WordPress, your button will look something like the button’s image above.

  • Clickable HTML Button With CSS

Didn’t like the previous button without CSS?

Well, you can decorate the button by adding little CSS code into the same. Below is the example of HTML button decorated with little CSS.

<a href="">
<button style="background-color: #4caf50;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin: 4px 2px;
border-radius: 5px;"> This is an example of HTML Button </button>

When you will add this code inside your WordPress pages or posts your button will look like this:

HTML Clickable Button with CSS

You can personalize this button as per your needs by changing the values of background color, text color, border, padding, margin, text alignment, font size, border radius etc.

You can learn more about custom templates for dev projects on

For any further information on this, don’t forget to leave a comment.

Similar Posts

Leave a Reply to Andrew Cancel reply

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


  1. Thanks for this tip. How can you make the cursor change to a hand when you hover over it like a real button?

    1. Hi Andrew,

      To change the cursor to hand while hovering, you can simply add cursor: pointer; somewhere in between the

      tags. And, considering that I have modified the above code.

      Let me know if it helps.

      Thank you.