HTML Buttons

HTML Buttons

Buttons allow users to interact with a web page.

They can submit forms, run JavaScript, or trigger actions when clicked.

HTML Button Element

The <button> element defines a clickable button.

By default, a button does nothing until an action is added.

<button>Click Me</button>

Styling HTML Buttons

Buttons are often styled using CSS.

<button class="mytestbtn">Green Button</button>

Disabled Buttons

The disabled attribute makes a button unclickable.

Disabled buttons usually appear faded.

<button disabled>Disabled Button</button>

Button with JavaScript

The onclick attribute can be used to run JavaScript when a button is clicked.

<button onclick="alert('Hello!')">Click Me</button>

Button Types

The type attribute defines the button behavior.

• type="button" – A normal clickable button
• type="submit" – Submits a form
• type="reset" – Resets form fields

<button type="button">Normal Button</button> <button type="submit">Submit</button> <button type="reset">Reset</button>

Buttons Inside Forms

Buttons are commonly used inside forms.

A submit button sends form data to the server, while a reset button clears the form.

<form action="/action_page.php">   First name: <input type="text" name="fname">   <button type="submit">Submit</button>   <button type="reset">Reset Form</button> </form>

You should always specify the type attribute.

HTML Button Reference

Tag	Description
<button>	Defines a clickable button