→ Asmath
→ Boostrap Buttons

Boostrap Buttons

Basic Buttons - Standard button styles with different color variations
Outline Buttons - Ghost buttons with colored borders that fill on hover
Button Sizes - Three different size variations for different contexts
Icon Buttons - Buttons with Bootstrap Icons integration
Block Buttons - Full-width buttons using Bootstrap's grid system
Button Groups - Grouped buttons for related actions
Loading Buttons - Interactive buttons with loading spinners

This bootstrap css example is contributed by Asmath, on 26-Dec-2024. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Button

Author Asmath

3.3k

v.5.3

Fork Fullscreen

<div class="container p-4">
    <h4>1. Basic Buttons</h4>
    <p class="text-muted">Standard Bootstrap button styles with hover effects</p>
    <div class="mb-4">
        <button type="button" class="btn btn-primary me-2">Primary</button>
        <button type="button" class="btn btn-secondary me-2">Secondary</button>
        <button type="button" class="btn btn-success me-2">Success</button>
        <button type="button" class="btn btn-danger me-2">Danger</button>
        <button type="button" class="btn btn-warning me-2">Warning</button>
        <button type="button" class="btn btn-info me-2">Info</button>
    </div>

<h4>2. Outline Buttons</h4>
    <p class="text-muted">Outlined versions for a more subtle look</p>
    <div class="mb-4">
        <button type="button" class="btn btn-outline-primary me-2">Primary</button>
        <button type="button" class="btn btn-outline-secondary me-2">Secondary</button>
        <button type="button" class="btn btn-outline-success me-2">Success</button>
        <button type="button" class="btn btn-outline-danger me-2">Danger</button>
    </div>

<h4>3. Button Sizes</h4>
    <p class="text-muted">Different size variations for buttons</p>
    <div class="mb-4">
        <button type="button" class="btn btn-primary btn-lg me-2">Large Button</button>
        <button type="button" class="btn btn-primary me-2">Default Button</button>
        <button type="button" class="btn btn-primary btn-sm">Small Button</button>
    </div>

<h4>4. Icon Buttons</h4>
    <p class="text-muted">Buttons with icons for better visual hierarchy</p>
    <div class="mb-4">
        <button type="button" class="btn btn-primary me-2">
      <i class="bi bi-plus-circle me-2"></i>Add Item
    </button>
        <button type="button" class="btn btn-success me-2">
      <i class="bi bi-check-circle me-2"></i>Confirm
    </button>
        <button type="button" class="btn btn-danger">
      <i class="bi bi-trash me-2"></i>Delete
    </button>
    </div>

<h4>5. Block Buttons</h4>
    <p class="text-muted">Full-width buttons using grid classes</p>
    <div class="d-grid gap-2 mb-4">
        <button type="button" class="btn btn-primary">Block Button</button>
        <button type="button" class="btn btn-secondary">Block Button</button>
    </div>

<h4>6. Button Groups</h4>
    <p class="text-muted">Grouped buttons for related actions</p>
    <div class="btn-group mb-4" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-primary">Left</button>
        <button type="button" class="btn btn-primary">Middle</button>
        <button type="button" class="btn btn-primary">Right</button>
    </div>

<h4>7. Loading State Buttons</h4>
    <p class="text-muted">Buttons with loading spinners</p>
    <div class="mb-4">
        <button class="btn btn-primary me-2" type="button" disabled>
      <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
      Loading...
    </button>
        <button class="btn btn-success" type="button" disabled>
      <span class="spinner-grow spinner-grow-sm me-2" role="status" aria-hidden="true"></span>
      Processing...
    </button>
    </div>
</div>

More Examples