HTML button Element

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>

Copy the Code and Run it Here

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>

Copy the Code and Run it Here

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

Next

Related Posts

HTML Video

Images in HTML

CSS Tutorial

HTML button Element – crus4