The classic styles of buttons are the same as Bootstrap 5.2 buttons which include several predefined styles. Read more here.
Rounded Buttons
However, in our template we have more options for controlling button styles. Daniel template has rounded and circle buttons that includes the same styles as bootstrap. If you want to use rounded buttons, just attach the btn-rounded classname. See examples below.
<button type="button" class="btn btn-primary btn-rounded">Primary</button>
<button type="button" class="btn btn-secondary btn-rounded">Secondary</button>
<button type="button" class="btn btn-success btn-rounded">Success</button>
<button type="button" class="btn btn-danger btn-rounded">Danger</button>
<button type="button" class="btn btn-warning btn-rounded">Warning</button>
<button type="button" class="btn btn-info btn-rounded">Info</button>
<button type="button" class="btn btn-light btn-rounded">Light</button>
<button type="button" class="btn btn-dark btn-rounded">Dark</button>
<button type="button" class="btn btn-link btn-rounded">Link</button>Icon Buttons
You can add icons to the buttons. Simply add the element inside the content of button element.
<button type="button" class="btn btn-primary"><i class="fa-solid fa-user"></i> Register </button>
<button type="button" class="btn btn-primary btn-rounded"><i class="fa-solid fa-user"></i> Register </button>If you want to align an icon to the right and text to the left, add the btn-icon-right classname to the button for proper spacing.
<button type="button" class="btn btn-primary btn-icon-right"> Register <i class="fa-solid fa-user"></i></button>Icon Button
Icon buttons are commonly found in app bars and toolbars.
Icons are also apt for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item.
In our template we have icon buttons with different variations such as rounded, circular, or rectangular. See example below.
<button type="button" class="btn btn-primary btn-icon btn-circle">
<i class="fa-brands fa-facebook-f"></i>
</button>
<button type="button" class="btn btn-primary btn-lg btn-icon">
<i class="fa-brands fa-facebook-f"></i>
</button>
<button type="button" class="btn btn-primary btn-sm btn-icon">
<i class="fa-brands fa-facebook-f"></i>
</button>Outline Button Hover Ripple Effect
Ripple effects work dynamically with the mouse cursor. Activate this effect by adding the btn-outline-ripple to your button. See example below.
<button type="button" class="btn btn-outline-primary btn-outline-ripple">Primary</button>Ripple Effect on Click
This is another ripple effect that also works by clicking the mouse when the cursor is hovering over the area. If you want to activate this effect, add the btn-ripple classname. See example below.
<button type="button" class="btn btn-primary btn-ripple">Primary</button>