Buttons include support for a handful of contextual variations, sizes, states, and more. Group a series of buttons together on a single line with the button group.
| Buttons options | Class | Description |
|---|---|---|
| Basic button | .btn.btn-* |
Use any template color from COLOR PALETTE that you like to use for button. |
| Flat button | .btn-flat |
For Flat button without background/outline color. |
| Round button | .btn-round |
For round button. |
| Square button | .btn-square |
For square button. |
| Button group | .btn-group |
Group a series of buttons together on a single line with the button group. |
| Button Size | .btn-[lg/sm/xs] |
For fancy larger, smaller or Extra smaller buttons size. |
| Button block | .btn-block |
Create block level buttons—those that span the full width of a parent. |
| Outline button | .btn-outline-* |
Use any template color from COLOR PALETTE that you like to use for outline button. |
| Vertical button group | .btn-group-vertical |
To create vertical button group. |
You can also create button dropdowns and split button using .btn-group wrapper.
Using above options,you can create some combinations like:
- Buttons with icon
- Buttons with only icon
- Round Buttons with icon
- Round Buttons with only icon
- Square Buttons with icon
- Square Buttons with only icon
- Outline Buttons with icon
- Outline Buttons with only icon
- Outline Buttons with only icon, etc...
Referrals :
| Type | URL |
|---|---|
| Bootstrap Buttons | https://getbootstrap.com/docs/4.1/components/buttons/ |
| Button Groups | https://getbootstrap.com/docs/4.1/components/button-group/ |
| Template Page | https://pixinvent.com/demo/convex-bootstrap-admin-dashboard-template/demo-1/components-buttons |
Floating Buttons
Floating action buttons are used for a special type of promoted action. They are distinguished by a circled icon floating above the UI and have special motion behaviors related to morphing, launching, and the transferring anchor point.
| Buttons options | Class | Description |
|---|---|---|
| Floating button | .btn.btn-* |
To create floating buttons, no extra classes used. |
Floating button also use, .btn-round, .btn-square, btn-outline-*, etc...
Social Buttons
Get Social buttons classes and descriptions below
| Buttons options | Class | Description |
|---|---|---|
| Social button | .btn.btn-social |
To create basic social button. |
| Social button with color | .btn-* |
To match button color with social colors use classes like .btn-facebook, btn-twitter, etc... |
| Social button block | .btn-block |
To create social block button. |
| Social button sizes | .btn-[lg/sm/xs] |
To create social block button. |
| Social outline button | .btn-outline-* |
To match button outline with social colors use classes like .btn-outline-facebook, btn-outline-twitter, etc... |
Referrals :
| Type | URL |
|---|---|
| Bootstrap Page | https://getbootstrap.com/docs/4.1/components/buttons/ |
| Template Page | https://pixinvent.com/demo/convex-bootstrap-admin-dashboard-template/demo-1/components-buttons.html |