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.
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
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
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.
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
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
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
24+ registered 
