How to Create a Button in HTML | Beginner Tutorial

It’s time to finally move on, and take the second step towards learning HTML. We shall learn or at least try to learn how to create a button in HTML – one of the easiest and exciting things to do when you are playing around with HTML.

Before we even begin I just want to make sure you have read and understood the first Chapter of HTML, right? If you haven’t and are getting ahead of yourself, well go back and do yourself some good. I would recommend you take baby steps just like the baby you are.

How to Create a Button in HTML

Button. B-U-T-T-O-N. Butt-on! I like the sound of it. Okay, moving on.

Don’t you just love it when you open a site and there are places on it where you can click and make something happen? Well those twitchy little things are nothing but buttons that help you to keep things rolling. Here’s an example of a button on one of the most popular search engines:

Does this look familiar? Yes, well when you enter something on google that’s where you click (or at least you used to since now you prefer pressing Enter). That Google Search is a button and that sentient lucky bastard next to it, you guessed right, is also a button.

Button, button everywhere not a place to click. Maybe I should just stop thinking out loud.

Steps on How to Create a Button in HTML

Here are the steps to get you started immediately if you wish to know how to create a button in HTML.

Step 1: Where’s your HTML folder again? Open it, right click and create a new text document or simply open notepad. Choice is yours. I think we were over this?

Step 2: Now open the notepad file and put your Chapter 1 learning to test. Make sure your tags begin to appear something like this:

Let me guess. This looks vaguely familiar too? The next step can’t go on without introducing to you the concept of button tags. Now HTML already knows all about what a button tag is. The question is, do you?

The <Button> Tag

The HTML <button> tag is used to insert buttons into your website. It’s your way of telling the system what to do. So when you enter the <button> element between the <body> tags, and save your notepad file it recognizes your urgent need to insert a button.

Step 3: Enter <button> tag between the <body> tags.

Yeah, you must be thinking – Is that it? Well, technically. That is everything you need to learn on how to create a button in HTML, and it answers our primal question. If you use the above code to create a website button, this is what your site would look like:

How did I get there? Well you should have paid attention in the first chapter loser. Okay reiterating for you: Save the notepad file as .html extension and then open it in your web browser to see.

Can you notice that thin strip of a line in your body. Well that’s your button right there. To be honest, our job’s done right here. But something looks amiss. This doesn’t look like a button? Does it?

Wait! Where’s the label? How would people know what it’s supposed to do?

Step 4: Put something in between the <button> tags that will act as the button label.

Once you are done, why don’t you go ahead and check your progress by opening the file once again on your browser.

There we are! Better!

The button has no visible label yet. Add plain text between the opening and closing tags. If you later put a button inside a form and it should run JavaScript instead of sending that form, set type="button" explicitly. A button in a form usually submits the form when no type is set.

To achieve that we need to make use of the <type> attribute.

<Button> type Attribute

A button too has attributes just like countless element tags in HTML. One such crucial attribute is “type”.

There are three types that you can allot to a button:

1. Button
2. Submit
3. Reset

When used in a form, Submit and Reset help in playing around with your data. Let’s not worry about that now.

Taking the first one forward, this is how our HTML should look like now:

Now when you save it, even though it appears nothing changes, it has become okay to run it on all sorts of browser.

The only problem with our HTML now is that we have simply created a button. If you click on it, nothing happens. Go ahead click on it.

Doesn’t that, I don’t know, look a tad bleak?

Well hold your horses right there. We settled on how to create a button in HTML and not how to go about clicking it and wondering why does nothing happen. I am tired now, maybe in the next chapter or so we decide to put life in it and add some meaning to its existence.

Using an Input Button in HTML

There is another valid way to create a button in HTML: <input type="button">. The <button> element is usually easier to style and can contain HTML, while an input button uses its value attribute for plain-text labelling.

The way you use it is simple as well. Here’s the code you should be replacing:

Notice how we <input> tag doesn’t require a closing tag and uses just another attribute called value to enter its label. It gives you the same result that the <button> tag gave you.

Keep quotation marks around attribute values. They make the markup clearer and avoid surprises when a value later contains spaces or special characters.

Go ahead play around. The world is your playground. For the current element reference and accessibility notes, see MDN’s <button> reference.

A button only gives the visitor something to press. To make it submit a form, open a menu, or change a page, connect that action with the appropriate HTML form behavior or JavaScript after the markup is working. If this is your first page, revisit how to create a website with Notepad before building the next interaction. If this is your first page, revisit how to create a website with Notepad before building the next interaction.