HTML Buttons

HTML Tutorial: HTML Buttons

Learn how to create and style HTML buttons with colorful examples, inputs, and results

---

HTML <button> is used to create clickable buttons. Buttons can trigger actions, links, or form submissions.

---

1️⃣ Basic Button

INPUT:

<button>Click Me</button>

OUTPUT:

✔️ Default button ✔️ Clickable but not styled

---

2️⃣ Button with Inline Styling

INPUT:

<button style="background-color:#0077cc; color:white; padding:10px 20px; border-radius:8px;">
  Submit
</button>

OUTPUT:

✔️ Styled button with background, text color, padding, and rounded corners

---

3️⃣ Different Button Types

INPUT:

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

OUTPUT:

✔️ type="button" → normal button ✔️ type="submit" → submits forms ✔️ type="reset" → resets form fields

---

4️⃣ Button with Classes

INPUT:

<style>
  .btn { padding:10px 20px; border-radius:8px; color:white; font-weight:bold; border:none; cursor:pointer; }
  .btn-blue { background-color:#0077cc; }
  .btn-green { background-color:#009933; }
  .btn-red { background-color:#cc0000; }
</style>

<button class="btn btn-blue">Blue Button</button>
<button class="btn btn-green">Green Button</button>
<button class="btn btn-red">Red Button</button>

OUTPUT:

✔️ Classes allow multiple buttons to share the same style ✔️ Color-specific classes provide variety

---

5️⃣ Button with Hover Effect

INPUT:

<style>
  .btn-hover { background-color:#0077cc; color:white; padding:10px 20px; border:none; border-radius:8px; transition: background-color 0.3s; }
  .btn-hover:hover { background-color:#005fa3; }
</style>

<button class="btn-hover">Hover Me</button>

OUTPUT:

✔️ Hover effect changes button color when mouse is over it ✔️ Improves user interaction experience

---

🎯 Best Practices for Buttons

• Use descriptive text (Submit, Click Me)
• Apply consistent styles with classes
• Add hover effects for interactivity
• Use buttons for actions, type="button", submit, or reset
• Maintain accessibility with proper contrast and size

---

🚀 What’s Next?

👉 HTML Iframes

Next lesson will cover:

• Embedding external content with <iframe>
• Adjusting width, height, and borders
• Practical iframe examples

---

HTML buttons are essential for interactive pages, allowing users to perform actions and improving user experience.