Buttons Component

  1. Home
  2. Compontents
  3. Buttons
Default Buttons

Press the button to copy the source code to clipboard. Use any of the available button classes to quickly create a styled button.

Primary Success Info Warning Danger Dark Default Secondary Link
Button Icons

You can use buttons with icons just add your icon type with .btn-icon-alignment.

Primary Success Info Warning Danger Dark Default Secondary
Buttons Rounded

Use .btn-rounded to create rounded buttons and .btn-shadow to add shadow to buttons.

Primary Button Success Button Info Button Warning Button Danger Button Dark Button Default Button Secondary
Buttons Outline

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.

Primary Button Success Button Info Button Warning Button Danger Button Dark Button
Button Sizes

Add .btn-lg, .btn-sm or .btn-xs to display your button with different sizes.

Buttons Blocks

Create block level buttons those that span the full width of a paren by adding .btn-block.

Active state

If you need to force the same appearance, go ahead and add .active.

Primary link Link
Disabled state

Make buttons look unclickable by fading them back with opacity.