Buttons

<h2>Button Types</h2>
<form class="form-container">
  <!-- Submit Button -->
  <div class="button-group">
    <h3>Form Submission</h3>
    <button type="submit" class="btn btn-primary">Submit Form</button>
  </div>
  <!-- Reset Button -->
  <div class="button-group">
    <h3>Form Reset</h3>
    <button type="reset" class="btn btn-secondary">Reset Fields</button>
  </div>
  <!-- Regular Button -->
  <div class="button-group">
    <h3>Custom Action</h3>
    <button type="button" class="btn btn-accent">Click Me</button>
  </div>
  <!-- Test fields -->
  <div class="form-group">
    <label for="test-input">Test Input:</label>
    <input type="text" id="test-input" placeholder="Type something...">
  </div>
</form>

<h2>Button Attributes & States</h2>
<form class="form-container">
  <!-- Disabled Button -->
  <div class="button-group">
    <h3>Disabled State</h3>
    <button class="btn btn-primary" disabled>Disabled Button</button>
    <small>Cannot be clicked or interacted with</small>
  </div>
  <!-- Autofocus Button -->
  <div class="button-group">
    <h3>Autofocus</h3>
    <button type="button" class="btn btn-accent" autofocus>Focus on Load</button>
    <small>This button is focused when page loads</small>
  </div>
  <!-- Button with Value -->
  <div class="button-group">
    <h3>Button Value Submission</h3>
    <button type="submit" name="action" value="save" class="btn btn-primary">Save</button>
    <button type="submit" name="action" value="delete" class="btn btn-danger">Delete</button>
    <small>Different values sent to server</small>
  </div>
  <!-- Form Attribute -->
  <div class="button-group">
    <h3>Form Association</h3>
    <button form="external-form" type="submit" class="btn btn-primary">
      Submit External Form
    </button>
    <small>This button controls a different form</small>
  </div>
  <!-- Formaction & Formmethod -->
  <div class="button-group">
    <h3>Custom Form Handling</h3>
    <button type="submit" formaction="/custom-action" formmethod="POST" class="btn btn-primary">
      Custom Endpoint
    </button>
    <small>Overrides form's action and method</small>
  </div>
</form>
<!-- External form referenced by form attribute -->
<form id="external-form" style="display: none;">
  <input type="hidden" name="external-data" value="example">
</form>

<h2>Button Styles & Variations</h2>
<div class="demo-container">
  <!-- Primary Buttons -->
  <section class="section">
    <h3>Primary Buttons</h3>
    <div class="button-showcase">
      <button class="btn primary">Primary</button>
      <button class="btn primary" disabled>Disabled</button>
      <button class="btn primary loading">Loading...</button>
    </div>
  </section>
  <!-- Secondary Buttons -->
  <section class="section">
    <h3>Secondary Buttons</h3>
    <div class="button-showcase">
      <button class="btn secondary">Secondary</button>
      <button class="btn secondary" disabled>Disabled</button>
    </div>
  </section>
  <!-- Outline Buttons -->
  <section class="section">
    <h3>Outline Buttons</h3>
    <div class="button-showcase">
      <button class="btn outline">Outline</button>
      <button class="btn outline" disabled>Disabled</button>
    </div>
  </section>
  <!-- Size Variations -->
  <section class="section">
    <h3>Button Sizes</h3>
    <div class="button-showcase vertical">
      <button class="btn primary small">Small</button>
      <button class="btn primary">Normal</button>
      <button class="btn primary large">Large</button>
    </div>
  </section>
  <!-- Icon Buttons -->
  <section class="section">
    <h3>Icon-like Buttons</h3>
    <div class="button-showcase">
      <button class="btn icon">❤️</button>
      <button class="btn icon">⭐</button>
      <button class="btn icon">🔔</button>
      <button class="btn icon">📌</button>
    </div>
  </section>
</div>