HTML Buttons Explained — Types, Styling & Accessibility

HTML buttons trigger actions on a page — submitting forms, resetting fields, opening dialogs, or running JavaScript code when clicked.

What You’ll Learn

By the end of this tutorial, you’ll know the difference between <button> and <input type="button">, the three button types (submit, reset, button), how to style buttons with CSS, and how to make buttons accessible.

Why Buttons Matter

Think of a button as a switch — you press it, something happens. Without buttons, users couldn’t submit forms, confirm actions, or interact with your page beyond clicking links.

Real-world use: Every “Buy Now” on Amazon, every “Log In” on any site, every “Send” on a contact form — these are all buttons. They’re the primary way users take action on a website.

Where This Fits in Your Learning Path

    flowchart LR
    A["Classes & Id"] --> B["**Buttons**"]
    B --> C["Iframes"]
    C --> D["HTML & JavaScript"]
    D --> E["File Paths"]
    E --> F["Interactive HTML Page"]
    style B fill:#f97316,stroke:#c2410c,color:#fff
    style A fill:#e5e7eb,stroke:#9ca3af,color:#374151
    style F fill:#22c55e,stroke:#16a34a,color:#fff
  

The <button> Element

The <button> element is the modern way to create clickable buttons:

<button type="button">Click Me</button>

The text between the opening and closing tags is what users see. Unlike <input type="button">, the <button> element can contain HTML — icons, bold text, images, or any other inline content:

<button type="submit">
  <strong>Submit</strong> <span style="font-size: 1.2em;">→</span>
</button>

Button Types

Every button has a type attribute that determines its behavior:

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
  <button type="button" onclick="alert('Custom action!')">Click Me</button>
</form>

Important: If you don’t specify a type, the default is submit when the button is inside a form. This causes the form to submit when clicked — which is often NOT what you want. Always set type="button" for non-submit buttons.

Button vs Input Button

There are two ways to create buttons:

<!-- Button element — more flexible -->
<button type="submit">
  <strong>Submit</strong> <span>→</span>
</button>

<!-- Input element — text only -->
<input type="submit" value="Submit">
<input type="button" value="Click Me">
<input type="reset" value="Reset">

Why <button> is preferred:

• Can contain HTML (icons, images, bold text)
• Easier to style with CSS
• Better accessibility (screen readers handle it well)
• You can use pseudo-elements (::before, ::after)

Use <input type="submit"> only when you need a simple text-only button and can’t use <button> for some reason.

Styling Buttons with CSS

Buttons have default browser styling that looks different across browsers. Most professional sites override it completely:

<style>
  .btn {
    display: inline-block;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
  }
  .btn-primary {
    background: #3b82f6;
    color: white;
  }
  .btn-primary:hover {
    background: #2563eb;
    transform: translateY(-1px);
  }
  .btn-danger {
    background: #ef4444;
    color: white;
  }
  .btn-danger:hover { background: #dc2626; }
  .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
</style>

<button class="btn btn-primary">Primary</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-primary" disabled>Disabled</button>

Key Button CSS Properties

Button Accessibility

Buttons should work for all users, including those using screen readers or keyboard navigation:

<!-- Always describe what the button does -->
<button type="button" aria-label="Close dialog">✕</button>

<!-- Use aria-pressed for toggle buttons (on/off) -->
<button type="button" aria-pressed="false" onclick="this.ariaPressed=this.ariaPressed==='true'?'false':'true'">
  Mute
</button>

Accessibility Rules for Buttons

1. Use <button>, not <div> or <a> styled as a button — screen readers know <button> is clickable
2. Always describe the action — “Submit” not just “Go”
3. Add aria-label when the visible text isn’t descriptive enough (e.g., icon-only buttons)
4. Ensure keyboard access — buttons are focusable by default (Tab key) and activate with Enter/Space

DodaTech Insight: Durga Antivirus Pro and Doda Browser both audit button accessibility. A page with inaccessible buttons can’t be fully used by assistive technologies.

Common Button Mistakes

1. Forgetting the type Attribute

<!-- ❌ Wrong: defaults to "submit" inside a form, refreshes the page -->
<button>Click me</button>

<!-- ✅ Correct: type="button" for non-submit actions -->
<button type="button">Click me</button>

2. Using <div> as a Button

<!-- ❌ Wrong: div is not keyboard-focusable or screen-reader-friendly -->
<div onclick="doSomething()">Click me</div>

<!-- ✅ Correct: use a real button -->
<button type="button" onclick="doSomething()">Click me</button>

3. Using a Link Where a Button Is Needed

<!-- ❌ Wrong: link for an action that doesn't navigate -->
<a href="javascript:void(0)" onclick="submitForm()">Submit</a>

<!-- ✅ Correct: button for actions -->
<button type="submit">Submit</button>

Links are for navigation. Buttons are for actions. If clicking it doesn’t change the URL, use a button.

4. Not Disabling Buttons During Form Submission

<!-- ❌ Wrong: user can click submit multiple times -->
<button type="submit">Submit</button>

<!-- ✅ Correct: disable after first click to prevent double submission -->
<button type="submit" onclick="this.disabled=true; this.form.submit();">Submit</button>

5. Missing Hover/Focus Styles

Default browser button styles vary and often look bad. Always add at least a :hover and :focus style for visual feedback.

Try It Yourself

Experiment with different button styles and behaviors:

Common Mistakes Beginners Make

1. Skipping the Fundamentals

Many beginners jump straight to advanced topics without mastering the basics. Take time to understand the core concepts before moving on.

2. Not Practicing Enough

Reading tutorials without writing code leads to shallow understanding. Code along with every example and experiment on your own.

3. Ignoring Error Messages

Error messages tell you exactly what went wrong. Read them carefully — they usually point to the line and type of issue.

4. Copy-Pasting Without Understanding

It’s tempting to copy code from tutorials, but typing it yourself and understanding each line builds real skill.

5. Giving Up Too Early

Every developer hits frustrating bugs. Take breaks, ask for help, and remember that struggling is part of learning.

Practice Questions

Q1: What’s the default type of a <button> inside a form?

Q2: What’s the advantage of <button> over <input type="button">?

Q3: What CSS property changes the cursor to a hand on hover?

Q4: Why shouldn’t you use a <div> as a button?

Q5: What’s the difference between a link (<a>) and a button?

Challenge

Build a “Form with Button States” page:

• A registration form with a submit button
• a reset button
• A disabled button that becomes enabled when a checkbox is checked
• Buttons styled with hover effects

Frequently Asked Questions

What’s Next?

Now let’s learn how to embed external content:

What’s Next

Congratulations on completing this Html Buttons tutorial! Here’s where to go from here:

• Practice daily — Consistency is more important than long study sessions
• Build a project — Apply what you learned by building something real
• Explore related topics — Check out other tutorials in the same category
• Join the community — Discuss with other learners and share your progress

Remember: every expert was once a beginner. Keep coding!