Crus4

logo

What is button Tag in HTML


The <button> tag is used to define a clickable button.

The button element can perform various tasks like submitting a form or opening any new web page. Inside a button element we can write any text we want.

Here is how we can create a button in html.

Example

<!DOCTYPE html>
<html>
<head>
</head>
<body> 
<h2>Button Element</h2>
<button class="button one">button 1</button>
<button class="button two">button 2</button>
</body>
</html>

To embed a link inside a button tag we need to enclose button tag within pair of <a> tags. Inside the <a> tag we can mention the link where we want to redirect the user after clicking on this button. Here is an example:

<!DOCTYPE html>
<html>
<head>
</head>
<body> 
  <a href="https://crus4.com" target="_blank">
    <button>Click Here</button>
  </a>
</body>
</html>

Remember that button tag is mostly used to handle events. When someone clicks on this button a particular function will be called and the action will be performed. We will learn about events in our upcoming posts.

To make the buttons stylish we are gonna add CSS to our code.

Example

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.one {background-color: #4CAF50;} /* Green */
.two {background-color: #008CBA;} /* Blue */
</style>
</head>
<body> 
<h2>Button Element</h2>
<button class="button one">button 1</button>
<button class="button two">button 2</button>
</body>
</html>

The HTML button Element is supported by almost all popular browsers.


Related Posts

HTML Video

Images in HTML

CSS Tutorial

What is button Tag in HTML