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

  • Hover

  • active

  • Normal

  • Hover

  • active

  • Normal

  • Hover

  • active

  • Normal

  • Hover

  • active

  • Normal

  • Hover

  • active

  • Normal

  • Hover

  • active


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.


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.

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.


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

Ladda Buttons official website