Buttons

  1. Bootstrap UI
  2. Buttons
Customizer
Judia Builder

Choose your themes & layouts etc.

Select Layouts

Choose your layout.

Vertical
Horizontal
Color Scheme

Choose Light or Dark Scheme.

Light
Dark
Brand
Card Layout

Choose borderless or border layout.

Borderless
Border
Layout Width

Choose Fluid or Boxed layout.

Fluid
Boxed
Layout Position

Choose Fixed or Scrollable Layout Position.

Topbar Color

Choose Light, Dark or Brand Topbar Color.

Light
Dark
Brand
Topbar Images

Choose Topbar Images.

Preloader

Choose a preloader.

Enable
Disable
Buy Now

Default Buttons

Use the btn class to show the default button style.

HTML Preview
<!-- Base Buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-secondary">Secondary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-info">Info</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-light">Light</button>

Outline Buttons

Use btn-outline- class with the below-mentioned variation to create a button with the outline.

HTML Preview
<!-- Outline Buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-outline-secondary">Secondary</button>

<button type="button" class="btn btn-outline-success">Success</button>

<button type="button" class="btn btn-outline-info">Info</button>

<button type="button" class="btn btn-outline-warning">Warning</button>

<button type="button" class="btn btn-outline-danger">Danger</button>

<button type="button" class="btn btn-outline-dark">Dark</button>

<button type="button" class="btn btn-outline-light">Light</button>

Rounded Buttons

Use the rounded-pill class to make a rounded button.

HTML Preview
<!-- Rounded Buttons -->
<button type="button" class="btn rounded-pill btn-primary">Primary</button>

<button type="button" class="btn rounded-pill btn-secondary">Secondary</button>

<button type="button" class="btn rounded-pill btn-success">Success</button>

<button type="button" class="btn rounded-pill btn-info">Info</button>

<button type="button" class="btn rounded-pill btn-warning">Warning</button>

<button type="button" class="btn rounded-pill btn-danger">Danger</button>

<button type="button" class="btn rounded-pill btn-dark">Dark</button>

<button type="button" class="btn rounded-pill btn-light">Light</button>

Subtle Buttons

Use btn-subtle- class with the below-mentioned variation to create a button with the subtle background.

HTML Preview
<!-- Subtle Buttons -->
<button type="button" class="btn btn-subtle-primary">Primary</button>

<button type="button" class="btn btn-subtle-secondary">secondary</button>

<button type="button" class="btn btn-subtle-success">Success</button>

<button type="button" class="btn btn-subtle-info">Info</button>

<button type="button" class="btn btn-subtle-warning">Warning</button>

<button type="button" class="btn btn-subtle-danger">Danger</button>

<button type="button" class="btn btn-subtle-dark">Dark</button>

Ghost Buttons

Use btn-ghost- class with the below-mentioned variation to create a button with the transparent background.

HTML Preview
<!-- ghost Buttons -->
<button type="button" class="btn btn-ghost-primary">Primary</button>

<button type="button" class="btn btn-ghost-secondary">secondary</button>

<button type="button" class="btn btn-ghost-success">Success</button>

<button type="button" class="btn btn-ghost-info">Info</button>

<button type="button" class="btn btn-ghost-warning">Warning</button>

<button type="button" class="btn btn-ghost-danger">Danger</button>

<button type="button" class="btn btn-ghost-dark">Dark</button>

Gradient Buttons

Use bg-gradient class to create a gradient button.

HTML Preview
<!-- Gradient Buttons -->
<button type="button" class="btn btn-primary bg-gradient">Primary</button>

<button type="button" class="btn btn-secondary bg-gradient">Secondary</button>

<button type="button" class="btn btn-success bg-gradient">Success</button>

<button type="button" class="btn btn-info bg-gradient">Info</button>

<button type="button" class="btn btn-warning bg-gradient">Warning</button>

<button type="button" class="btn btn-danger bg-gradient">Danger</button>

<button type="button" class="btn btn-dark bg-gradient">Dark</button>

<button type="button" class="btn btn-light bg-gradient">Light</button>

Buttons with Label

Use btn-label class to create a button with the label.

Primary
HTML Preview
<!-- Buttons with Label -->
<button type="button" class="btn btn-primary btn-label"><i class="ri-user-smile-line label-icon align-middle fs-lg me-2"></i> Primary</button>

<button type="button" class="btn btn-success btn-label"><i class="ri-check-double-line label-icon align-middle fs-lg me-2"></i> Success</button>

<button type="button" class="btn btn-warning btn-label"><i class="ri-error-warning-line label-icon align-middle fs-lg me-2"></i> Warning</button>

<!-- Rounded with Label -->
<button type="button" class="btn btn-primary btn-label rounded-pill"><i class="ri-user-smile-line label-icon align-middle rounded-pill fs-lg me-2"></i> Primary</button>

<button type="button" class="btn btn-success btn-label rounded-pill"><i class="ri-check-double-line label-icon align-middle rounded-pill fs-lg me-2"></i> Success</button>

<button type="button" class="btn btn-warning btn-label rounded-pill"><i class="ri-error-warning-line label-icon align-middle rounded-pill fs-lg me-2"></i> Warning</button>

<!-- Buttons with Label Right -->
<button type="button" class="btn btn-primary btn-label right"><i class="ri-user-smile-line label-icon align-middle fs-lg ms-2"></i> Primary</button>

<button type="button" class="btn btn-success btn-label right rounded-pill"><i class="ri-check-double-line label-icon align-middle rounded-pill fs-lg ms-2"></i> Success</button>

Load More Buttons

Example of loading buttons.

HTML Preview
<!-- Load More Buttons -->
<div class="hstack flex-wrap gap-2 mb-3 mb-lg-0">
<button class="btn btn-outline-primary btn-load">
    <span class="d-flex align-items-center">
        <span class="spinner-border flex-shrink-0" role="status">
            <span class="visually-hidden">Loading...</span>
        </span>
        <span class="flex-grow-1 ms-2">
            Loading...
        </span>
    </span>
</button>
<button type="button" class="btn btn-success btn-load">
    <span class="d-flex align-items-center">
        <span class="spinner-border flex-shrink-0" role="status">
            <span class="visually-hidden">Loading...</span>
        </span>
        <span class="flex-grow-1 ms-2">
            Loading...
        </span>
    </span>
</button>
<button type="button" class="btn btn-outline-secondary btn-load">
    <span class="d-flex align-items-center">
        <span class="spinner-grow flex-shrink-0" role="status">
            <span class="visually-hidden">Loading...</span>
        </span>
        <span class="flex-grow-1 ms-2">
            Loading...
        </span>
    </span>
</button>
<button type="button" class="btn btn-danger btn-load">
    <span class="d-flex align-items-center">
        <span class="spinner-grow flex-shrink-0" role="status">
            <span class="visually-hidden">Loading...</span>
        </span>
        <span class="flex-grow-1 ms-2">
            Loading...
        </span>
    </span>
</button>
</div>

<div class="d-flex flex-wrap gap-2 mb-3 mb-lg-0">
<button class="btn btn-outline-primary btn-load">
    <span class="d-flex align-items-center">
        <span class="flex-grow-1 me-2">
            Loading...
        </span>
        <span class="spinner-border flex-shrink-0" role="status">
            <span class="visually-hidden">Loading...</span>
        </span>
    </span>
</button>
<button type="button" class="btn btn-success btn-load">
    <span class="d-flex align-items-center">
        <span class="flex-grow-1 me-2">
            Loading...
        </span>
        <span class="spinner-border flex-shrink-0" role="status">
            <span class="visually-hidden">Loading...</span>
        </span>
    </span>
</button>
<button type="button" class="btn btn-outline-warning btn-load">
    <span class="d-flex align-items-center">
        <span class="flex-grow-1 me-2">
            Loading...
        </span>
        <span class="spinner-grow flex-shrink-0" role="status">
            <span class="visually-hidden">Loading...</span>
        </span>
    </span>
</button>
<button type="button" class="btn btn-info btn-load">
    <span class="d-flex align-items-center">
        <span class="flex-grow-1 me-2">
            Loading...
        </span>
        <span class="spinner-grow flex-shrink-0" role="status">
            <span class="visually-hidden">Loading...</span>
        </span>
    </span>
</button>
</div>

Custom Toggle Buttons

Example of toggle buttons.

HTML Preview
<!-- Custom Toggle Buttons -->
<button type="button" class="btn btn-primary custom-toggle active" data-bs-toggle="button">
    <span class="icon-on"><i class="ri-alarm-line align-bottom"></i> Active</span>
    <span class="icon-off">Unactive</span>
</button>

<button type="button" class="btn btn-secondary custom-toggle active" data-bs-toggle="button">
    <span class="icon-on"><i class="ri-user-add-line align-bottom me-1"></i> Connect</span>
    <span class="icon-off"><i class="ri-check-fill align-bottom me-1"></i> Unconnect</span>
</button>

<button type="button" class="btn btn-success custom-toggle" data-bs-toggle="button">
    <span class="icon-on"><i class="ri-thumb-up-line align-bottom me-1"></i> Yes</span>
    <span class="icon-off"><i class="ri-thumb-down-line align-bottom me-1"></i> No</span>
</button>

<button type="button" class="btn btn-warning custom-toggle active" data-bs-toggle="button">
    <span class="icon-on"><i class="ri-add-line align-bottom me-1"></i> Follow</span>
    <span class="icon-off"><i class="ri-user-unfollow-line align-bottom me-1"></i> Unfollow</span>
</button>

<button type="button" class="btn btn-danger custom-toggle" data-bs-toggle="button">
    <span class="icon-on">On</span>
    <span class="icon-off">Off</span>
</button>

<button type="button" class="btn btn-dark custom-toggle" data-bs-toggle="button">
    <span class="icon-on"><i class="ri-bookmark-line align-bottom me-1"></i> Bookmark</span>
    <span class="icon-off"><i class="ri-bookmark-3-fill align-bottom me-1"></i> Unbookmark</span>
</button>

<button type="button" class="btn btn-outline-primary custom-toggle" data-bs-toggle="button">
    <span class="icon-on">Active</span>
    <span class="icon-off">Unactive</span>
</button>

<button type="button" class="btn btn-outline-secondary custom-toggle" data-bs-toggle="button">
    <span class="icon-on"><i class="ri-add-line align-bottom me-1"></i> Follow</span>
    <span class="icon-off"><i class="ri-user-unfollow-line align-bottom me-1"></i> Unfollow</span>
</button>

<button type="button" class="btn btn-outline-success custom-toggle active" data-bs-toggle="button">
    <span class="icon-on">On</span>
    <span class="icon-off">Off</span>
</button>

<button type="button" class="btn btn-subtle-warning custom-toggle active" data-bs-toggle="button">
    <span class="icon-on">Follow</span>
    <span class="icon-off">Unfollow</span>
</button>

<button type="button" class="btn btn-subtle-danger custom-toggle" data-bs-toggle="button">
    <span class="icon-on">On</span>
    <span class="icon-off">Off</span>
</button>

<button type="button" class="btn btn-dark custom-toggle active" data-bs-toggle="button">
    <span class="icon-on"><i class="ri-bookmark-line align-bottom"></i></span>
    <span class="icon-off"><i class="ri-bookmark-3-fill align-bottom"></i></span>
</button>

Base class

Bootstrap has a base .btn class that sets up basic styles such as padding and content alignment. By default, .btn controls have a transparent border and background color, and lack any explicit focus and hover styles.

HTML Preview
<button type="button" class="btn">Base class</button>

Custom sizing with CSS variables

You can even roll your own custom sizing with CSS variables:

HTML Preview
<button type="button" class="btn btn-primary" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
    Custom button
</button>

Buttons Sizes

Use btn-lg class to create a large size button and btn-sm class to create a small size button.

HTML Preview
<!-- Large Button -->
<button type="button" class="btn btn-primary btn-lg">Large button</button>

<button type="button" class="btn btn-light btn-lg">Large button</button>

<!-- Small Button -->
<button type="button" class="btn btn-primary btn-sm">Small button</button>

<button type="button" class="btn btn-light btn-sm">Small button</button>

Buttons Width

Use w-xs,w-sm,w-md,w-lg class to make different sized buttons respectively.

HTML Preview
<!-- Width Button -->
<button type="button" class="btn btn-primary w-xs">Xs</button>

<button type="button" class="btn btn-danger w-sm">Small</button>

<button type="button" class="btn btn-warning w-md">Medium</button>

<button type="button" class="btn btn-success w-lg">Large</button>

Buttons Tag

Use btn class with different HTML elements. (though some browsers may apply a slightly different rendering)

Link
HTML Preview
<!-- Tag Button -->
<a class="btn btn-primary" href="#" role="button">Link</a>

<button class="btn btn-success" type="submit">Button</button>

<input class="btn btn-info" type="button" value="Input">

<input class="btn btn-danger" type="submit" value="Submit">

<input class="btn btn-warning" type="reset" value="Reset">

Buttons Toggle Status

Use data-bs-toggle="button" to toggle a button’s active state.

HTML Preview
<!-- Toggle Button Status -->
<button type="button" class="btn btn-primary" data-bs-toggle="button" aria-pressed="false">
    Single toggle
</button>

Buttons Grid

Use d-grid class to create a full-width block button.

HTML Preview
<!-- Buttons Grid -->
<div class="d-grid gap-2" >
    <button class="btn btn-subtle-primary" type="button">Button</button>
    <button class="btn btn-subtle-primary" type="button">Button</button>
</div>

Checkbox & Radio Buttons

Combine button-like checkbox and radio toggle buttons into a seamless looking button group.

HTML Preview
<!-- Checkbox Buttons -->
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
    <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off" checked="">
    <label class="btn btn-primary" for="btncheck1">Checkbox 1</label>

    <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
    <label class="btn btn-primary" for="btncheck2">Checkbox 2</label>

    <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
    <label class="btn btn-primary" for="btncheck3">Checkbox 3</label>
</div>

<!-- Radio Buttons -->
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
    <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked="">
    <label class="btn btn-outline-secondary" for="btnradio1">Radio 1</label>

    <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
    <label class="btn btn-outline-secondary" for="btnradio2">Radio 2</label>

    <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
    <label class="btn btn-outline-secondary" for="btnradio3">Radio 3</label>
</div>

Buttons Group

Use the btn-group class in the parent class to wrap a series of buttons.

HTML Preview
<!-- Buttons Group -->
<div class="btn-group" 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>

<div class="btn-group mt-4 mt-md-0" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-light"><i class="ri-align-right"></i></button>
    <button type="button" class="btn btn-light"><i class="ri-align-center"></i></button>
    <button type="button" class="btn btn-light"><i class="ri-align-left"></i></button>
</div>

Icon Group

Use btn-icon class to wrap icon in button

HTML Preview
<!-- Buttons Group -->
<button type="button" class="btn btn-primary"><i class="ri-map-pin-line"></i></button>
<button type="button" class="btn btn-danger btn-icon"><i class="ri-delete-bin-5-line"></i></button>
<button type="button" class="btn btn-success btn-icon"><i class="ri-check-double-line"></i></button>
<button type="button" class="btn btn-light btn-icon"><i class="ri-brush-2-fill"></i></button>

<button type="button" class="btn btn-outline-primary btn-icon"><i class="ri-24-hours-fill"></i></button>
<button type="button" class="btn btn-outline-danger btn-icon"><i class="ri-customer-service-2-line"></i></button>
<button type="button" class="btn btn-outline-success btn-icon"><i class="ri-mail-send-line"></i></button>
<button type="button" class="btn btn-outline-warning btn-icon"><i class="ri-menu-2-line"></i></button>

Buttons Toolbar

Use btn-toolbar class to combine sets of button groups into more complex components.

HTML Preview
<!-- Buttons Toolbar -->
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group me-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-light">1</button>
        <button type="button" class="btn btn-light">2</button>
        <button type="button" class="btn btn-light">3</button>
        <button type="button" class="btn btn-light">4</button>
    </div>
    <div class="btn-group me-2" role="group" aria-label="Second group">
        <button type="button" class="btn btn-light">5</button>
        <button type="button" class="btn btn-light">6</button>
        <button type="button" class="btn btn-light">7</button>
    </div>
    <div class="btn-group" role="group" aria-label="Third group">
        <button type="button" class="btn btn-light">8</button>
    </div>
</div>

Button Group Sizing

Use btn-group- class with the below-mentioned variation to set the different sizes of button groups.

HTML Preview
<!-- Group Buttons Sizing -->
<div class="btn-group btn-group-lg" 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> 

<div class="btn-group mt-2" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-light">Left</button>
    <button type="button" class="btn btn-light">Middle</button>
    <button type="button" class="btn btn-light">Right</button>
</div>

<div class="btn-group btn-group-sm mt-2" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-secondary">Left</button>
    <button type="button" class="btn btn-secondary">Middle</button>
    <button type="button" class="btn btn-secondary">Right</button>
</div>

Vertical Variation

Make a set of buttons appear vertically stacked .Split button dropdowns are not supported here.

Dropdown link Dropdown link
HTML Preview
<!-- Vertical Variation -->
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
    <div class="btn-group" role="group">
        <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
        </button>
        <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
        </ul>
    </div>
</div>

<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-light">Button</button>
    <div class="btn-group" role="group">
        <button id="btnGroupVerticalDrop1" type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
        </button>
        <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
            <a class="dropdown-item" href="#">Dropdown link</a>
            <a class="dropdown-item" href="#">Dropdown link</a>
        </div>
    </div>
    <button type="button" class="btn btn-light">Button</button>
    <button type="button" class="btn btn-light">Button</button>
</div>

<div class="btn-group-vertical" role="group" aria-label="Vertical radio toggle button group">
    <input type="radio" class="btn-check" name="vbtn" id="vbtn-radio1" checked="">
    <label class="btn btn-outline-secondary" for="vbtn-radio1">Radio 1</label>
    <input type="radio" class="btn-check" name="vbtn" id="vbtn-radio2">
    <label class="btn btn-outline-secondary" for="vbtn-radio2">Radio 2</label>
    <input type="radio" class="btn-check" name="vbtn" id="vbtn-radio3">
    <label class="btn btn-outline-secondary" for="vbtn-radio3">Radio 3</label>
</div>

Focus Ring

Click directly on the link below to see the focus ring in action, or into the example below and then press Tab.

HTML Preview
<a href="#!" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2">
    Focus ring
</a>

<!--custom focus ring color-->
<a href="#!" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--tb-focus-ring-color: rgba(118, 93, 255, .25)">
    Custom focus ring
</a>

<!---custom blurry offset focus ring-->
<a href="#!" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--tb-focus-ring-x: 10px; --tb-focus-ring-y: 10px; --tb-focus-ring-blur: 4px">
    Blurry offset focus ring
</a>

Focus Ring Utilities

In addition to .focus-ring, we have several .focus-ring-* utilities to modify the helper class defaults. Modify the color with any of our theme colors. Note that the light and dark variants may not be visible on all background colors given current color mode support.

HTML Preview
<p><a href="#" class="d-inline-flex focus-ring focus-ring-primary py-1 px-2 text-decoration-none border rounded-2">Primary focus</a></p>

<p><a href="#" class="d-inline-flex focus-ring focus-ring-secondary py-1 px-2 text-decoration-none border rounded-2">Secondary focus</a></p>

<p><a href="#" class="d-inline-flex focus-ring focus-ring-success py-1 px-2 text-decoration-none border rounded-2">Success focus</a></p>

<p><a href="#" class="d-inline-flex focus-ring focus-ring-danger py-1 px-2 text-decoration-none border rounded-2">Danger focus</a></p>

<p><a href="#" class="d-inline-flex focus-ring focus-ring-warning py-1 px-2 text-decoration-none border rounded-2">Warning focus</a></p>

<p><a href="#" class="d-inline-flex focus-ring focus-ring-info py-1 px-2 text-decoration-none border rounded-2">Info focus</a></p>

<p><a href="#" class="d-inline-flex focus-ring focus-ring-light py-1 px-2 text-decoration-none border rounded-2">Light focus</a></p>

<p><a href="#" class="d-inline-flex focus-ring focus-ring-dark py-1 px-2 text-decoration-none border rounded-2">Dark focus</a></p>
© Judia.
Design & Develop by Themesbrand