Buttons

Button components.

Default button

Default
Active
Disabled

<div id="graph1"></div>
				

Sizes

Default

Small
Default
Large

Block

Small
Default
Large

<div id="graph1"></div>
				

Bootstrap colors

Primary


Secondary


Success


Danger


Warning


Info


Light


Dark



<div id="graph1"></div>
				

Material design colors

Red


Pink


Purple


Deep Purple


Indigo


Blue


Light blue


Cyan


Teal


Green


Light green


Lime


Yellow


Amber


Orange


Deep orange


Brown


Grey


Blue grey


Black


White



<div id="graph1"></div>
				

Bootstrap outlined

Primary


Secondary


Success


Danger


Warning


Info


Light


Dark



<div id="graph1"></div>
				

Material design colors

Red


Pink


Purple


Deep Purple


Indigo


Blue


Light blue


Cyan


Teal


Green


Light green


Lime


Yellow


Amber


Orange


Deep orange


Brown


Grey


Blue grey


Black


White



<div id="graph1"></div>
				

Flat button

State

Default
Active
Disabled

Sizes

Small
Default
Large
Block

<div id="graph1"></div>
				

Hover & Click

Default button hover

Hoverable class
Hover dark - default
Hover light

Flat button hover

Hover dark - default
Hover light

Button wave

Black wave
White wave
Flat button dark wave
Dark flat button white wave

<div id="graph1"></div>
				

With Icon

Left icon
Left icon flat
Right icon
Right icon flat
Icon only
Icon only flat

Sizes

Small

Default

Large


<div id="graph1"></div>
				

With badge

Left badge
Left badge flat
Right badge
Right badge flat

Sizes

Small

Default

Large


<div id="graph1"></div>
				

Button Groups

Single Group

Toolbar


<div id="graph1"></div>
				

Button Groups Sizing


<div id="graph1"></div>
				

Vertical Button Group


<div id="graph1"></div>
				

FAB button

Default
Active
Disabled

<div id="graph1"></div>
				

FAB Sizes

Small
Default
Large

<div id="graph1"></div>
				

FAB button bootstrap colors

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

<div id="graph1"></div>
				

FAB button material design colors

Red
Pink
Puple
Deep Purple
Indigo
Blue
Light Blue
Cyan
Teal
Green
Light Green
Lime
Yellow
Amber
Orange
Deep orange
Brown
Grey
Blue grey
Black
White

<div id="graph1"></div>
				

Flat FAB button

State

Default
Active
Disabled

Sizes

Small
Default
Large

<div id="graph1"></div>
				

Hover & Click

Default FAB button hover

Hoverable class
Hover dark - default
Hover light

Flat button hover

Hover dark - default
Hover light

Button wave

Black wave
White wave
Flat button dark wave
Dark flat button white wave

<div id="graph1"></div>
				

FAB image button

State

Default
Active
Disabled

Sizes

Small
Default
Large

Hover & wave

Dark Hover
Light Hover
Dark Wave
Light Wave

<div id="graph1"></div>
				

FAB with badge

Default FAB

Small
Default
Large

Flat FAB

Small
Default
Large

Image FAB

Small
Default
Large

<div id="graph1"></div>
				

Pulse effect

Small

Large


<div id="graph1"></div>
				

Positioning

Position inside

Overflowing


<div id="graph1"></div>
				

FAB group

Default
Active
Disabled

Sizes

Small trigger & small buttons
Small trigger & default buttons
Small trigger & large buttons
Default trigger & small buttons
Default trigger & default buttons
Default trigger & large buttons
Large trigger & small buttons
Large trigger & default buttons
Large trigger & large buttons

Directions

Small trigger & small buttons
Small trigger & default buttons
Small trigger & large buttons
Default trigger & small buttons
Default trigger & default buttons
Default trigger & large buttons
Large trigger & small buttons
Large trigger & default buttons
Large trigger & large buttons

<div id="graph1"></div>
				

Social buttons

Responsive

Short

Icons


<div id="graph1"></div>