Buttons

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.0/components/buttons/
Button Groups https://getbootstrap.com/docs/4.0/components/button-group/
Template Page https://demos.pixinvent.com/apex-angular-admin-template/demo-1/components/buttons

Extended 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
Template Page https://demos.pixinvent.com/apex-angular-admin-template/demo-1/components/buttons