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!

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