Buttons in html

In this article we are going to learn about buttons in html, how we can add button on our web page.

We learnt about html, text in html, lists in html, links in html and inputs in html so, now we are going to learn about buttons.

Buttons

In html we have buttons that can be used to perform particular functions for example, button can be used to download a file from webpage when clicked and we use <button></button> as button tags.

Let us create one button, copy and paste below code.

<button>Button 1</button>

So, we should have the following results.

Let us create two buttons, copy and paste below code.

<button>Button 1</button>

<button>Button 2</button>

So, we should have the following results.

Let us create five buttons, copy and paste below code.

<button>Button 1</button>

<button>Button 2</button>

<button>Button 3</button>

<button>Button 4</button>

<button>Button 5</button>

So, we should have the following results.

We can create many buttons that can do differnt operations when each button is clicked.

Buttons can be created using link tags <a></a> and input tag </input>

Buttons using link tag

Let us create button using link tags <a></a>, copy and paste below code.

<a href="">Button using link tag</a>

So, we should have the following results.

Button using link tag

Wen we use link tag as a button gives us different results because link is not actual button but can behave like a button doing operations that button can perform. Link can be used to download files on webpage like the actual button.

Button using input tag

Let us create button using input tag, copy and paste below code.

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

So, we should have the following results.

When using input tag gives simillar results to actual button but we must be specific that we need the input to be a button by using type attribute with a value of button in our input tag else the input will behave as input field..

Buttons with different tags

Let us create different buttons to sum up our lesson, copy and paste below code.

<button>Button 1</button>

<a href="">Button using link tag</a>

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

So, we should have the following results.

Button using link tag

Conclusion

In this article we learnt about buttons in html, how we can add buttons on our web page. with examples and using link and input tags to create buttons. So, all these buttons can be used to perform required operations on the web page.