HTML Buttons

HTML Buttons

 1. Basic HTML Button

• Creates a clickable button
•  Default type is submit (inside a form)

 2. Button Types (Very Important)

 type="button"

Used for JavaScript actions.

 type="submit"

Submits a form.

 type="reset"

Resets form fields.

 3. Button with onclick (JavaScript)

 Runs JavaScript when clicked

 4. Button with CSS Styling

•  Modern look
•  Hover effect

 5. Button vs Input Button

<button> (Recommended)

• Prefer <button> for modern websites.

 6. Button as a Link (CSS Way)

•  Looks like button
•  Behaves like link

 7. Disabled Button

•  Prevents clicks

 8. Button with Icon

•  Icons improve UX

Common Mistakes

•  Forgetting type="button" inside forms
•  Using buttons without accessibility text
•  Inline styling everywhere
•  Using <div> instead of <button>

Accessibility Tips (Important)

•  Use <button> instead of <div> 
•  Add meaningful text
•  Use aria-label if needed

 Key Points to Remember

• Use <button> for actions

• Specify type explicitly

• Style using CSS

• <button> is better than <input>

• Important for UX & accessibility