Tag button

The <button> tag creates a clickable button on a web page. It can be used to:

• Submit a form
• Trigger JavaScript functions
• Perform interactive actions

---

✅ Basic Syntax

<button>Click Me</button>

🖱️ Result: A button labeled “Click Me”.

---

🎯 Types of <button>

The <button> tag supports a type attribute that defines its behavior:

<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button">Do Something</button>

Type	Description
submit	Submits the parent form (default type)
reset	Resets all fields in the parent form
button	Does nothing unless scripted via JavaScript

---

🧪 Example with JavaScript

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

📍 Clicking this button shows an alert box with the message “Hello!”

---

🎨 Styling with CSS

<style>
button {
  background-color: #007bff;
  color: white;
  padding: 10px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
</style>

---

📌 Accessibility & Best Practices

• Always add descriptive text inside the button.
• Use aria-label or title for extra accessibility if needed.
• Use <button> instead of <div onclick> — it’s more semantic and keyboard-accessible.

---

✅ Summary

Feature	Value/Usage
Tag	<button>
Self-closing?	❌ No (use opening and closing tags)
Types	submit, reset, button
Events	Can use onclick, onmouseover, etc.
CSS	Fully customizable