Bootstrap UI Kit

Primary Button

<button class="btn btn-primary">Click Me</button>

Outline Button

<button class="btn btn-outline-primary">Outline</button>

Ghost Button

<button class="btn btn-link text-decoration-none">Ghost Button</button>

Danger Button

<button class="btn btn-danger">Delete</button>

Success Button

<button class="btn btn-success">Save Changes</button>

Gradient Button

<button class="btn text-white" style="background: linear-gradient(90deg, #1e3a8a, #7c3aed);">
    Gradient ✨
</button>

Button with Icon

<button class="btn btn-primary">
    <i class="fas fa-download me-1"></i> Download
</button>

Icon-Only Buttons

<button class="btn btn-primary rounded-circle" style="width: 44px; height: 44px;">
    <i class="fas fa-plus"></i>
</button>

Button Group

<div class="btn-group" role="group">
    <button class="btn btn-primary">Left</button>
    <button class="btn btn-primary">Middle</button>
    <button class="btn btn-primary">Right</button>
</div>

Loading Button

<button class="btn btn-primary" disabled>
    <span class="spinner-border spinner-border-sm me-2"></span> Processing...
</button>

Social Login Buttons

<button class="btn text-white" style="background: #1877f2;">
    <i class="fab fa-facebook-f me-1"></i> Facebook
</button>
<button class="btn text-white" style="background: #db4437;">
    <i class="fab fa-google me-1"></i> Google
</button>
<button class="btn text-white" style="background: #000;">
    <i class="fab fa-github me-1"></i> GitHub
</button>

Floating Action Button

<button class="btn btn-primary rounded-circle shadow" style="width: 56px; height: 56px;">
    <i class="fas fa-plus"></i>
</button>

Button Sizes

<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary">Medium</button>
<button class="btn btn-primary btn-lg">Large</button>

Disabled Button

<button class="btn btn-secondary" disabled>Disabled</button>