Table of contents
1.
Introduction
2.
How to make a Button in Html
2.1.
Creating a Button Using the HTML Button Tag
2.1.1.
Example
2.2.
Creating a Button Using the HTML Anchor Tag
2.2.1.
Example
2.3.
Creating a Button Using the HTML Input Tag
2.3.1.
Example
3.
Attributes of HTML Button Tag
4.
Browser Support
5.
Frequently Asked Questions
5.1.
How do you create a button in HTML?
5.2.
How do I create a URL button in HTML?
5.3.
How do I create a like button in HTML?
5.4.
How to create icon button HTML?
6.
Conclusion
Last Updated: Sep 17, 2024
Easy

How to Create a Button in HTML?

Author Sagar Mishra
4 upvotes
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

The <button> tag in HTML creates clickable buttons for forms on your webpage. You can include text or images within the tag for the button content.

create a button in html

HTML stands for Hyper Text Markup Language. HTML is the code used to design a web page and its content. We can create buttons, bullet points, a set of paragraphs, and many more using HTML. HTML uses CSS for styling purposes and Javascript for the scripting language.

The button element defines a clickable button. Websites cannot function without Buttons. You need them for a number of functions, like uploading data, getting access to more content, and linking to various web pages and external websites. So, let's discuss how to create a button using HTML.

How to make a Button in Html

Creating a Button Using the HTML Button Tag

The next topic of discussion is creating a button in HTML using the button tag in the "How to Create a Button in HTML" series.

The <button> tag is one of the easiest ways to add buttons to your websites. Simply include the text you want the button to contain within the opening and closing tags to use it. For example:

Example

<button type="button">Click here!</button>

 

Output

Output

Similarly, you can create many buttons for your website, like Submit button, Next button, etc. You just have to change the text message after ">" this sign. For example:

<button type="button">Submit</button> 

 

Output

Output

To make the button more attractive, we can add JavaScript to them. Let's understand this with an example. I am using Inline JavaScript in the code. The snippet is as follows.

<button onclick="alert('Hey Ninjas!')">Submit</button>

 

After giving the alert message, the web page will show the pop-up wherever you click on the button.

pop-up with message

Creating a Button Using the HTML Anchor Tag

In the "How to Create a Button in HTML" series, we will now discuss creating a button in HTML using the Anchor tag.

In the section discussed above, we saw how to add buttons using the <button> tag. Now, we will check out how to add a button using an anchor tag.

An anchor tag is used to create a link for the web pages, files, locations, etc., using its hyperlink attribute. But we can style it with CSS, so it looks the same as an actual button. Let's see this using an example.

Example

<!DOCTYPE html>
<html>
<head>
<style>


 a {
        text-decoration: none;
        border: 2px solid #800000;
        color: #000;
        background: #e6e4e4;
        padding: 5px;
        border-radius: 2px;
       
      }
</style>
</head>
<body>


<a href="https://www.codingninjas.com/">Welcome to Coding Ninjas!</a>


</body>
</html>

 

Output

Output

Creating a Button Using the HTML Input Tag

The next topic of discussion is creating a button in HTML using the input tag in the "How to Create a Button in HTML" series.

This section will let you understand how to create a button using an input tag. Let's have a look at the Input type button. The <input> tag defines an input field where the user can enter data. It is an important part of a form element, for example.

Example

<input type="button" value="Button" />

Output

Output

We can also use "submit" in the type field. This is also a type of button using which we can submit our data filled in the web page.

<input type="submit" value="Submit" />

 

Output

Output

Attributes of HTML Button Tag

Our last topic of the "How to Create a Button in HTML" series is the Attributes of a button.

There are several attributes that we can use while creating a button. Let's have a look.

Attribute 

Description

type It is used to specify the type of the button. For eg: submit, reset and button.
onClick It generally runs a script whenever a button is clicked.
name It defines the name of the button, used in form inputs and labels.
value It is used to set the initial value of the button element.
disabled This makes the button disabled, so it cannot be clicked. Usually it is grey in colour.
tabindex It defines the order of selection when the tab key is used.
autofocus Specifies that a button should automatically get focused during the loading of the page.

Browser Support

As of the latest update here are few examples of browsers and the versions from which they support HTML Button tags.

  • Microsoft Edge: HTML button tags are supported from the initial release.
  • Google Chrome: HTML button tags are supported from version 4 and above.
  • Safari: HTML button tags are supported from version 3.2 and above.
  • Opera: HTML button tags are supported from version 5.0 and above.
  • Brave: HTML button tags are supported from the initial release.

Frequently Asked Questions

How do you create a button in HTML?

You can create a button in HTML using the <button> element: <button type="button">Click Me</button>.

How do I create a URL button in HTML?

To create a URL button in HTML link a button to a URL: <a href="https://example.com"><button>Visit Site</button></a>.

How do I create a like button in HTML?

You can create a like button in HTML using <button> and customize with CSS.

How to create icon button HTML?

You can create icon button HTML by combining an <button> with an <i> or <span> for the icon, like <button><i class="icon"></i></button> and customize it with CSS.

Conclusion

We have discussed the topic of HTML Button tag in this article. In detail, we have seen the different types of creating a button, like using a button tag, anchor tag, and input tag. In the end, we have seen some attributes of a button.

We hope this blog has helped you enhance your knowledge of How to Create a Button in HTML. Check out our articles on the below topics if you want to learn more.

Forms in HTML.

Iframes in HTML.

Elements in HTML.

And many more on our platform Coding Ninjas Studio.

But suppose you have just started your learning process and are looking for questions from tech giants like Amazon, Microsoft, Uber, etc. In that case, you must look at the problemsinterview experiences, and interview bundles for placement preparations.

However, you may consider our paid courses to give your career an edge over others!

Happy Learning!

Live masterclass