Block Button With Icon

Button With Direction

Button Animation

A button can animate to show hidden content. Modern and subtle
styles & effects for buttons.

Floating Button

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.
Use the default class .btn with an additional class
.btn-floating .

Flat And Raised Button

Raised buttons behave like a piece of material resting on another
sheet – they lift and color on press.
Flat buttons are printed on the material. They do not lift but
fill with color on press.

Pill Left Or Right

Create a button like pill by .btn-pill-left or .btn-pill-right with .btn-round.

Button With Icon

Basic buttons are traditional buttons with borders and background
with an extra commponent like an icon. You can place it either
on the left or the right which ever you want with different color
opitons.

Nesting Button Group

Justified Button Group

To use justified button groups with <button> elements, you must wrap each button in a button group. Most browsers
don't properly apply our CSS for justification to <button> elements, but since we support button dropdowns, we can work
around that.

Button.Js Componenents

There are a few easy ways to quickly get started with Bootstrap, each one ...

Appealing to a different skill level and use case. Read through to see what suits
your particular needs.

Male
Female
N/A

Apple
Banana
Orange

Stateful

Add data-loading-text="Loading..." to use
a loading state on a button.