Thema Buttons
Thema button elements.Default Buttons
Button colors
.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
Button groups
Vertical button groups
Nested button groups
Multiple button groups
Block level button
Rippler buttons
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
Flat Buttons
Just add class .btn-flat
to flat your button elements.
Raised Buttons
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.
Button sizes
Available classes for large button .btn-lg
; small button .btn-sm
; small extra small .btn-xs
Rounded buttons
Just add class .btn-round
to use rounded button.
Checkbox as buttons
Radio as buttons
Split dropdown button
Default
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"
-
Ladda buttons
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"
.