Step 5 - How To Create a Button in HTML

Now, we take the HTML code for a content box andadd more some style to create a button.

After all, a button is just a box with rounded edges. You just a radius to the border which makes it round.

1. Access Text Editor Tab

As mentioned previously, you need to work with HTML in the Text Editor view.

2. Copy and Paste HTML Button Code

To add a yellow button to your content, copy and paste this code below somewhere in the text view, where you want the button to display.

<div style="background-color: #f6ff00; border-radius: 50px; font-weight: 400; padding: 10px 20px; text-align: center;"><strong>THIS IS YOUR YELLOW BUTTON WITH BOLD BLACK TEXT.</strong></div>

The code use to make the box round is this:

border-radius: 25px;

If you want the button edges to be more round, you just increase the 25px number to something higher.

border-radius: 50px;

If you want the button edges to be more square, you just decrease the 25px number to something lower.

border-radius: 10px;

Play around with these numbers, and find the number that gives you the style you want.

2. Adjust Button Size

Right now, this yellow button has no width parameters. Which means the button will stretch to the width size of your page or post.

If you want a short button, you simply add another piece of code to limit the size of it's width.

width: 200px;

And to add a black border around the button, you simply add this:

border: 5px solid #000000;

Copy and Paste this yellow button with black border code:

<div style="background-color: #f6ff00; border-radius: 50px; font-weight: 400; padding: 10px 20px; text-align: center; width: 200px;"><strong>YELLOW BUTTON</strong></div>

The width code is added to within the button style. Now the yellow button is only 200px wide.

And the border code added a black border around the yellow button.


If you want the button width to be longer, increase the number to add more width:

width: 400px;

How to Change Button Color in HTML

To change your colors in the buttons above, simply change the HEX color code to the color you want.

You can use the Text Color picker in the Visual Editor tab to use the color picker.

  • #dbdbdb = gray
  • #000000 = black
  • #ff0000 = red

And so on.

Then go back to the Text Editor tab and replace the color codes within your button.

For a red button, copy and paste this code:

<div style="background-color: #ff0000; border-radius: 50px; font-weight: 400; padding: 10px 20px; text-align: center; width: 200px;"><strong>RED BUTTON</strong></div>

For a red button with a black Border, copy and paste this code:

<div style="background-color: #ff0000; border: 5px solid #000000; border-radius: 50px; font-weight: 400; padding: 10px 20px; text-align: center; width: 200px;"><strong>RED BUTTON 2</strong></div>

How To Link A Button

To add a link to your button, simply:

  1. Go to your Visual Editor tab
  2. Select the copy inside the button
  3. Add a link to the copy

And that's it.

You should now know how to create a box around text in HTML and how to create a button in HTML.

The more you work with HTML, the more you will get comfortable with it.

Buttons - Endless Possibilities

You have endless possibilities with buttons. All with just using HTML and CSS. No images or plugins required!

For more ideas, check out this great resource:
https://www.w3schools.com/css/css3_buttons.asp

HTML is not difficult. It is just a language like other languages.

Once you learn the language, you can apply HTML to create visually appealing content.

Now, let's talk about pros and cons and tips to help you keep learning HTML.

Next Page -> HTML Code Tips



Join the Discussion
Write something…
Recent messages
Jadatherapy Premium
Thank you for this training

Really appreciate this training because I always wanted to know how to create boxes and then you came along.

Much appreciated

Jennifer
Reply
kimwolfe Premium
Yay Jennifer :) Hit me up if you have any questions.

Hopefully, you will be surprised at how easy it is. Especially for buttons. No plugins or images needed.

Keep me posted how this goes!

Kim
Reply
Jadatherapy Premium
Thank you will do when I get round to it. lol

But I think I will need your help so thank you for the offer.

Jennifer
Reply
kimwolfe Premium
Just don't fear it. It really is easier than you think. Especially, since you can just copy my codes and then edit them in visual editor view of WordPress.
Reply
Jadatherapy Premium
Thank you I will not leave it too long because I want to add to new articles.

Jennifer
Reply
Claudiojuan Premium
Thank you very much very interesting training I am always looking to place the least amount of plugins on my sites. Everything that is HTML and CSS codes seems great to me. Regards!
Reply
kimwolfe Premium
Yes, it is easier than you make think. And there are tons of free resources online to continue your training. Let me know if you have any questions.
Reply
Claudiojuan Premium
OK Kim All questions about HTML and CSS codes you will be my teacher. Thank you!
Reply
kimwolfe Premium
Awesome. I am here for ya :)
Reply
Chrissies Premium
Many thanks Kim :)
Reply
kimwolfe Premium
Thanks Chrissies! Hope this helps.
Reply
Triblu Premium
An EXCELLENT tutorial Kim, Thank YOU!
Reply
kimwolfe Premium
Hey Trish. HUGE THANKS! Appreciate you chiming in and stopping by here.
Reply
merlynmac Premium
Great how-to! I do have on issue. Lesson 4 isn't loading for me. That's the lesson on "How To Change Box Color in HTML". If I'm on Lesson 3 and click on Next Page -> it doesn't work. If I use the menu to get to lesson 4 it doesn't work and if I jump to Lesson 5 and try to go back to lesson 4 using the <- Previous Page button it doesn't work. Everything else is golden!
Reply
merlynmac Premium
Lesson's 6 and 7 are also broken.
Reply
kimwolfe Premium
Hey thanks for the heads up here. I will see if I can figure out how to fix. Thanks again.
Reply
merlynmac Premium
It may not be your training...It looks like the WA servers are having issues....Reach out to support to see if that's the issue. If so, you might not have to do anything but wait.
Reply
kimwolfe Premium
I’ll wait it out then and go from there. Thanks again.
Reply
kimwolfe Premium
Can you confirm you access lessons 4 - 7? I think the issue should be fixed now.
Reply
merlynmac Premium
Confirmed..I can now access all lessons.
Reply
kimwolfe Premium
Thank you :)
Reply
Top