HTML Buttons
Buttons let users interact with a page. They can submit forms, run JavaScript, or trigger other actions when clicked.
HTML Button
The <button> element makes a clickable button. On its own it does nothing until you give it an action.
Example
A plain button.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Button</title>
</head>
<body>
<button>Click Me</button>
</body>
</html>
Styling HTML Buttons
Buttons are often styled with CSS.
Example
A green button styled with CSS.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.mytestbtn {
background-color: #4CAF50;
color: white;
padding: 12px 24px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<button class="mytestbtn">Green Button</button>
</body>
</html>
Disabled Buttons
Use the disabled attribute to make a button unclickable.
Tip: Disabled buttons cannot be clicked and usually look faded.
Example
A disabled button.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disabled Button</title>
</head>
<body>
<button disabled>Disabled Button</button>
</body>
</html>
Button with JavaScript
You can run JavaScript when a button is clicked using the onclick attribute.
Note: You will learn more about JavaScript in the HTML JavaScript chapter.
Example
A button that shows an alert when clicked.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Js</title>
</head>
<body>
<button onclick="alert('Hello!')">Click Me</button>
</body>
</html>
Button Types
The type attribute sets what a button does. There are three types: type="button" is a normal button that does nothing by default, type="submit" submits a form, and type="reset" clears all form fields.
Buttons are often used inside forms: a submit button sends the form data to the server, and a reset button clears the form.
Note: Always set the type attribute. Inside a form the default type is submit, and browsers may behave differently if it is left out.
Example
Submit and reset buttons inside a form.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Form</title>
</head>
<body>
<form action="/action_page.php">
First name: <input type="text" name="fname">
<button type="submit">Submit</button>
<button type="reset">Reset Form</button>
</form>
</body>
</html>
The three button types
A normal, a submit, and a reset button.
<button type="button">Normal Button</button>
<button type="submit">Submit</button>
<button type="reset">Reset</button>