Use the Button tag to show the default button style.

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

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

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

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

Use bg-gradient class to create a gradient button.

Use bg-animation class to create an animated button.

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

Example of loading buttons.

Example of simple bottom borderd buttons.

Example of toggle buttons.

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

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

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

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 class="" color="">Base Class</Button>

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

                                <Button class="" color="primary" style="--vz-btn-padding-y: .25rem;--vz-btn-padding-x: .5rem;--vz-btn-font-size: .75rem;" >Custom button</Button>

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>

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

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

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

Use btn-icon class to wrap icon in button

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

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

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

Click directly on the link below to see the focus ring in action.

                                
<Link href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" >Focus Ring</Link>
<Link 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</Link>
<Link 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</Link>
								
							

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.

                                
									<p>
										<Link href="#" class="d-inline-flex focus-ring focus-ring-primary py-1 px-2 text-decoration-none border rounded-2" >Primary focus</Link>
									</p>
									<p>
										<Link href="#" class="d-inline-flex focus-ring focus-ring-secondary py-1 px-2 text-decoration-none border rounded-2" >Secondary focus</Link>
									</p>
									<p>
										<Link href="#" class="d-inline-flex focus-ring focus-ring-success py-1 px-2 text-decoration-none border rounded-2" >Success focus</Link>
									</p>
									<p class="mb-lg-0">
										<Link href="#" class="d-inline-flex focus-ring focus-ring-danger py-1 px-2 text-decoration-none border rounded-2" >Danger focus</Link>
									</p>
									<p>
										<Link href="#" class="d-inline-flex focus-ring focus-ring-warning  py-1 px-2 text-decoration-none border rounded-2" >Warning focus</Link>
									</p>
									<p>
										<Link href="#" class="d-inline-flex focus-ring focus-ring-info py-1 px-2 text-decoration-none border rounded-2" >Info focus</Link>
									</p>
									<p>
										<Link href="#" class="d-inline-flex focus-ring focus-ring-light py-1 px-2 text-decoration-none border rounded-2" >Light focus</Link>
									</p>
									<p>
										<Link href="#" class="d-inline-flex focus-ring focus-ring-dark py-1 px-2 text-decoration-none border rounded-2" >Dark focus</Link>
									</p>