General Button
Default Button
Use any of the available button classes to quickly create a styled button . We provide a variety of colors for you to express different emotions.
-
Normal
#e4eaec -
Hover
#ccd5db -
active
#76838f
-
Normal
#3e8ef7 -
Hover
#589ffc -
active
#247cf0
-
Normal
#11c26d -
Hover
#28d17c -
active
#05a85c
-
Normal
#0bb2d4 -
Hover
#28c0de -
active
#0099b8
-
Normal
#eb6709 -
Hover
#f57d1b -
active
#e79857
-
Normal
#ff4c52 -
Hover
#ff666b -
active
#f2353c
Alternative Button
Use a classes .btn-outline to quickly create a outline.
Rounded Button / Squard Button
Round button and the square button can be used to distinguish th different behavior or style.
Sizing
Size might vary from smaller screen to a larger screen. We made few sizes that are pixel perfect and resposive.
Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.
Block Button With Icon
Create block level buttons,with by adding add .btn-block .
Button With Direction
Create buttons with directions by adding add .btn-up, .btn-right, .btn-bottom or .btn-left .
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.
Icon Button
Icon only button.
Icon Dropdown
Icon used in the dropdown.
Social Icon Button
Icon only button. But icon is social icon.
Social In Labels
It is often used at the top of a page or section. An social icon must be with this variation.
Social Button Sizes
Different Sizes for you to use with icon button or icon only button.
Icon Block Button
Icon only block button.
Button Group
Basic Button Group
Grouped buttons give users access to frequently performed actions of a focused task. Wrap a series of buttons with .btn in .btn-group.
Vertical Button Group
Order the buttons in a group for actions that are used regularly or are significant.
Button Group Sizes
Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group, including when nesting multiple groups.
Button Toolbar
This group button is used to show the close relationship between a number of buttons, and is usually used on edit page.
Nesting Button Group
Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.
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.
Stateful
Add data-loading-text="Loading..." to use a loading state on a button.