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 provides different classes for buttons based upon their purpose. For example - Include Default Button to the code by adding .btn-default
.
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 Buttons are 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 Buttons are text-only buttons. Include Flat Button to the code by adding .pmd-btn-flat
.
Outline Buttons are buttons with a border rather that background color. These are generally used to define secondary action. Include Outline Button to the code by adding .pmd-btn-outline
.
Include FAB Button to the code by adding .pmd-btn-fab
.
Include Raised Floating Action Button to the code by adding .pmd-btn-fab .pmd-btn-raised
.
Include Flat FAB Button to the code by adding .pmd-btn-fab .pmd-btn-flat
.
Button Sizes
Fancy larger or smaller buttons?
Add .btn-lg
, .btn-sm
for additional sizes.
Create block level buttons—those that span the full width of a parent— by adding .btn-block
.
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 buttons plugin.