##### Milestone 30%

##### Release 60%

- Mailbox
- Calendar
- Contacts
- Media
- Documents
- Project
- Forum
- Dashboard

# Buttons

### 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

  #62a8ea

- Hover

  #89bceb

- active

  #4e97d9

- Normal

  #46be8a

- Hover

  #5cd29d

- active

  #36ab7a

- Normal

  #57c7d4

- Hover

  #77d6e1

- active

  #47b8c6

- Normal

  #f2a654

- Hover

  #f4b066

- active

  #e79857

- Normal

  #f96868

- Hover

  #fa7a7a

- active

  #e9595b

#### 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.

Male Female N/A
Apple Banana Orange

#### Stateful

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

### Ladda Buttons official website

#### Expand

#### Zoom

#### Progress

#### Slide

#### Sizing