Buttons

  1. Base UI
  2. Buttons

Default Buttons

Use the btn class to show the default button style.

<!-- Base Buttons -->
<button type="button" class="btn btn-primary waves-effect waves-light">Primary</button>

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

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

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

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

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

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

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

Outline Buttons

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

<!-- Outline Buttons -->
<button type="button" class="btn btn-primary waves-effect waves-light material-shadow-none">Primary</button>

<button type="button" class="btn btn-outline-secondary waves-effect waves-light material-shadow-none">Secondary</button>

<button type="button" class="btn btn-outline-success waves-effect waves-light material-shadow-none">Success</button>

<button type="button" class="btn btn-outline-info waves-effect waves-light material-shadow-none">Info</button>

<button type="button" class="btn btn-outline-warning waves-effect waves-light material-shadow-none">Warning</button>

<button type="button" class="btn btn-outline-danger waves-effect waves-light material-shadow-none">Danger</button>

<button type="button" class="btn btn-outline-dark waves-effect waves-light material-shadow-none">Dark</button>

<button type="button" class="btn btn-outline-light waves-effect material-shadow-none">Light</button>

Rounded Buttons

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

<!-- Rounded Buttons -->
<button type="button" class="btn rounded-pill btn-primary waves-effect waves-light">Primary</button>

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

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

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

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

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

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

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

Soft Buttons

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

<!-- Soft Buttons -->
<button type="button" class="btn btn-soft-primary waves-effect waves-light material-shadow-none">Primary</button>

<button type="button" class="btn btn-soft-secondary waves-effect material-shadow-none">secondary</button>

<button type="button" class="btn btn-soft-success waves-effect waves-light material-shadow-none">Success</button>

<button type="button" class="btn btn-soft-info waves-effect waves-light material-shadow-none">Info</button>

<button type="button" class="btn btn-soft-warning waves-effect waves-light material-shadow-none">Warning</button>

<button type="button" class="btn btn-soft-danger waves-effect waves-light material-shadow-none">Danger</button>

<button type="button" class="btn btn-soft-dark waves-effect waves-light material-shadow-none">Dark</button>

Ghost Buttons

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

<!-- ghost Buttons -->
<button type="button" class="btn btn-ghost-primary waves-effect waves-light material-shadow-none">Primary</button>

<button type="button" class="btn btn-ghost-secondary waves-effect material-shadow-none">secondary</button>

<button type="button" class="btn btn-ghost-success waves-effect waves-light material-shadow-none">Success</button>

<button type="button" class="btn btn-ghost-info waves-effect waves-light material-shadow-none">Info</button>

<button type="button" class="btn btn-ghost-warning waves-effect waves-light material-shadow-none">Warning</button>

<button type="button" class="btn btn-ghost-danger waves-effect waves-light material-shadow-none">Danger</button>

<button type="button" class="btn btn-ghost-dark waves-effect waves-light material-shadow-none">Dark</button>

Gradient Buttons

Use bg-gradient class to create a gradient button.

<!-- Gradient Buttons -->
<button type="button" class="btn btn-primary bg-gradient waves-effect waves-light">Primary</button>

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

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

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

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

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

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

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

Animation Buttons

Use bg-animation class to create an animated button.

<!-- Animation Buttons -->
<button type="button" class="btn btn-primary btn-animation waves-effect waves-light" data-text="Primary"><span>Primary</span></button>

<button type="button" class="btn btn-secondary btn-animation waves-effect waves-light" data-text="Secondary"><span>Secondary</span></button>

<button type="button" class="btn btn-success btn-animation waves-effect waves-light" data-text="Success"><span>Success</span></button>

<button type="button" class="btn btn-info btn-animation waves-effect waves-light" data-text="Info"><span>Info</span></button>

<button type="button" class="btn btn-warning btn-animation waves-effect waves-light" data-text="Warning"><span>Warning</span></button>

<button type="button" class="btn btn-danger btn-animation waves-effect waves-light" data-text="Danger"><span>Danger</span></button>

<button type="button" class="btn btn-dark btn-animation waves-effect waves-light" data-text="Dark"><span>Dark</span></button>

Buttons with Label

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

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

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

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

<!-- Rounded with Label -->
<button type="button" class="btn btn-primary btn-label waves-effect waves-light rounded-pill"><i class="ri-user-smile-line label-icon align-middle rounded-pill fs-16 me-2"></i> Primary</button>
    
<button type="button" class="btn btn-success btn-label waves-effect waves-light rounded-pill"><i class="ri-check-double-line label-icon align-middle rounded-pill fs-16 me-2"></i> Success</button>

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

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

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

Load More Buttons

Example of loading buttons.

<!-- 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>

Border Buttons

Example of simple bottom borderd buttons.

<!-- Border Buttons -->
<div class="hstack flex-wrap gap-2 mb-3 mb-lg-0">
    <button class="btn btn-primary btn-border">Primary</button>
    <button class="btn btn-secondary btn-border">Secondary</button>
    <button class="btn btn-success btn-border">Success</button>
    <button class="btn btn-warning btn-border">Warning</button>
    <button class="btn btn-danger btn-border">Danger</button>
</div>

<div class="hstack flex-wrap gap-2 mb-3 mb-lg-0">
    <button class="btn btn-outline-primary btn-border">Primary</button>
    <button class="btn btn-outline-secondary btn-border">Secondary</button>
    <button class="btn btn-outline-success btn-border">Success</button>
    <button class="btn btn-soft-warning btn-border">Warning</button>
    <button class="btn btn-soft-danger btn-border">Danger</button>
    <button class="btn btn-soft-dark btn-border">Dark</button>
</div>

Custom Toggle Buttons

Example of toggle buttons.

<!-- 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-soft-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-soft-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>

Buttons Sizes

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

<!-- 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. 

<!-- Width Button -->
<button type="button" class="btn btn-primary w-xs waves-effect waves-light">Xs</button>

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

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

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

Buttons Tag

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

Link 
<!-- Tag Button -->
<a class="btn btn-primary waves-effect waves-light" href="#" role="button">Link</a>

<button class="btn btn-success waves-effect waves-light" 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">

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. 

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

Custom sizing with CSS variables

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

<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 Toggle Status

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

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

Buttons Grid

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

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

Checkbox & Radio Buttons

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

<!-- 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 material-shadow-none" for="btncheck1">Checkbox 1</label>
    
    <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
    <label class="btn btn-primary material-shadow-none" for="btncheck2">Checkbox 2</label>
    
    <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
    <label class="btn btn-primary material-shadow-none" 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 material-shadow-none" for="btnradio1">Radio 1</label>

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

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

Buttons Group

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

<!-- Buttons Group -->
<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-primary material-shadow-none">Left</button>
    <button type="button" class="btn btn-primary material-shadow-none">Middle</button>
    <button type="button" class="btn btn-primary material-shadow-none">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 material-shadow-none"><i class="ri-align-right"></i></button>
    <button type="button" class="btn btn-light material-shadow-none"><i class="ri-align-center"></i></button>
    <button type="button" class="btn btn-light material-shadow-none"><i class="ri-align-left"></i></button>
</div>

Icon Buttons

Use btn-icon class to wrap icon in button

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

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

Buttons Toolbar

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

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

Button Group Sizing

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

<!-- Group Buttons Sizing -->
<div class="btn-group material-shadow btn-group-lg" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-primary material-shadow-none">Left</button>
    <button type="button" class="btn btn-primary material-shadow-none">Middle</button>
    <button type="button" class="btn btn-primary material-shadow-none">Right</button>
</div> 

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

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

Vertical Variation

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

Dropdown link Dropdown link 
<!-- Vertical Variation -->
<div class="btn-group material-shadow" role="group" aria-label="Button group with nested dropdown">
    <button type="button" class="btn btn-primary material-shadow-none">1</button>
    <button type="button" class="btn btn-primary material-shadow-none">2</button>
    <div class="btn-group" role="group">
        <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle material-shadow-none" 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 material-shadow" role="group" aria-label="Vertical button group">
    <button type="button" class="btn btn-light material-shadow-none">Button</button>
    <div class="btn-group" role="group">
        <button id="btnGroupVerticalDrop1" type="button" class="btn btn-light dropdown-toggle material-shadow-none" 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 material-shadow-none">Button</button>
    <button type="button" class="btn btn-light material-shadow-none">Button</button>
</div>

<div class="btn-group-vertical material-shadow" 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 material-shadow-none" for="vbtn-radio1">Radio 1</label>
    <input type="radio" class="btn-check" name="vbtn" id="vbtn-radio2">
    <label class="btn btn-outline-secondary material-shadow-none" for="vbtn-radio2">Radio 2</label>
    <input type="radio" class="btn-check" name="vbtn" id="vbtn-radio3">
    <label class="btn btn-outline-secondary material-shadow-none" 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.

Focus ring Custom focus ring Blurry offset focus ring 
<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="--vz-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="--vz-focus-ring-x: 10px; --vz-focus-ring-y: 10px; --vz-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.

Primary focus

Secondary focus

Success focus

Danger focus

Warning focus

Info focus

Light focus

Dark focus

<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>/pre>
© Velzon.
Design & Develop by Themesbrand