Color Switcher

Thema Buttons

Thema button elements.

.btn-green
.btn-green-sea
.btn-emerald
.btn-nephritis
.btn-peter-river
.btn-belize-hole
.btn-amethyst
.btn-wisteria
.btn-wet-asphalt
.btn-midnight-blue
.btn-sun-flower
.btn-orange
.btn-carrot
.btn-pumpkin
.btn-alizarin
.btn-pomegranate
.btn-clouds
.btn-silver
.btn-concrete
.btn-asbestos

Vertical button groups

Nested button groups

Multiple button groups

Block level button

Effect that spreads like a wave in touch or click.

Rippler Official Website

Just add .rippler .rippler-default for default rippler



Just add .rippler .rippler-inverse for default rippler



Link buttons with state colors

Just add class .btn-flat to flat your button elements.

Just add class .btn-raised

Floating Buttons

Just add class .btn-float

Buttons with icon

Alternative buttons

Just add class .btn-bordered and to use the alternative buttons.

Just add class .btn-flat and .btn-bordered to flat your alternative buttons.

Available classes for large button .btn-lg; small button .btn-sm; small extra small .btn-xs

Just add class .btn-round to use rounded button.

Checkbox as buttons

Radio as buttons

Split dropdown button


Button dropdown enhancements usage

To add bullet just add class .bullet to the dropdown menu, .pull-right

.bullet
.bullet.pull-right
.bullet.pull-top
.bullet.pull-top.pull-right

Button dropdown enhancements centered

.bullet.pull-center
.bullet.pull-center.pull-top
.bullet.pull-middle
.bullet.pull-middle.pull-right"
.bullet Ignored
.pull-middle.pull-center"

Button dropdown enhancements animated hover effects

Just add class to the anchor element .hvr-bounce-to-right-global-parent".

.hvr-bounce-to-right-global-parent"

Justified button groups

Ladda Button Official Website

Just add class .ladda-button and attribute and value data-style="expand-left" for expand to left.


Just add class .ladda-button and attribute and value data-style="expand-right" for expand to right.


Just add class .ladda-button and attribute and value data-style="expand-up" for expand up.


Just add class .ladda-button and attribute and value data-style="expand-down" for expand down.


Just add class .ladda-button and attribute and value data-style="zoom-in" for zoom in.


Just add class .ladda-button and attribute and value data-style="zoom-out" for zoom out.


Just add class .ladda-button and attribute and value data-style="slide-left" for slide left.


Just add class .ladda-button and attribute and value data-style="slide-right" for slide right.


Just add class .ladda-button and attribute and value data-style="slide-up" for slide up.


Just add class .ladda-button and attribute and value data-style="slide-down" for slide down.


Just add class .ladda-button and attribute and value data-style="contract" for contract.


Sizes

Just add attribute and value data-size="xs".