# Button

Button component is an enhanced version of the standard HTML `<``button``>` element. A button consists of text and/or an image that clearly communicates what action will occur when user clicks or touches it. Propeller button component provides various types of buttons, and allows user to add both display and click effects.

## Bootstrap Button

Bootstrap provides different classes for button based upon its purpose. For example - Include Default Button to the code by adding `.btn-default`.

## Propeller Button

Propeller button consists of Bootstrap HTML structure with Propeller customized classes based on material design standards. Add `.pmd-ripple-effect` followed by Bootstrap classes to get ripple effect to button.

## Raised Button

Raised Button is used to give prominence to actions in a layouts with a lot of varying content. Include Raised Button to the code by adding `.pmd-btn-raised`.

## Flat Button

Flat Button is text-only button. Include Flat Button to the code by adding `.pmd-btn-flat`.

## Outline Button

Outline Button is a button with a border rather that background color. It is generally used to define secondary action. Include Outline Button to the code by adding `.pmd-btn-outline`.

## Floating Action Button (FAB)

Include FAB Button to the code by adding `.pmd-btn-fab`.

## Raised Floating Action Button

Include Raised Floating Action Button to the code by adding `.pmd-btn-fab .pmd-btn-raised`.

## Flat Floating Action Button

Include Flat FAB Button to the code by adding `.pmd-btn-fab .pmd-btn-flat`.

## Button Sizes

Want Fancy larger or smaller button? Add `.btn-lg`, `.btn-sm` for additional sizes.

Large button
Medium button
Small button

Create block level button—those that span the full width of a parent— by adding `.btn-block`.

## Button Group

Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our button plugin.

Combine sets of `<div class="btn-group">` into a `<div class="btn-toolbar">` for more complex components.

Wrap a series of buttons with `.btn` in `.btn-group`.

Left Middle Right

With `<a>` elements, Just wrap a series of `.btn`s in `.btn-group.btn-group-justified`.

## Configuration Options

The Propeller CSS classes apply various predefined visual enhancements to the button. The table lists the available classes and their effects.

Propeller Class | Effect | Remark
--- | --- | ---
`.pmd-ripple-effect` | Supporting class which, when used with `.btn` adds a ripple effect to the button. | Optional
`.pmd-btn-raised` | Supporting class which, when used with `.btn` makes the button look raised. | Optional
`.pmd-btn-flat` | Supporting class which, when used with `.btn` makes the button flat. | Optional
`.pmd-btn-fab` | Supporting class which, when used with `.btn` makes it circular. | Optional
`.pmd-btn-outline` | Supporting class which, when used with `.btn` creates a Outline button. | Optional