Buttonplate Component

Getting Started

You can either download a copy of the source files or install Buttonplate via Bower.

bower install buttonplate

CSS Implementation

Start by including the necessary files.

<head>
    <link href="css/buttonplate.css" rel="stylesheet" type="text/css">
</head>

Now class your button to gain the desired effect. For example:

<button class="button line-red large">Example Button</button>

SASS Implementation

Instead of including the CSS file above, you can import the SASS file and create your own button styles. See an example below:

@import "buttonplate/sass/import";

.btn-primary,
.btn-secondary {
   @include button-setup();
   @include button-shape(rounded);
}
.btn-primary {
   @include button-style(line, black);
   @include button-size(large);
}
.btn-secondary {
   @include button-style(flat, white);
   @include button-size(normal);
}

Javascript Call

If you want to enable button drop downs then you will need to execute the following Javascript.

<script>
   new buttonplate('.btn-primary');
   new buttonplate('.btn-secondary');
</script>

Working Examples

Flat Buttons

White Grey Black Aqua Blue Green Orange Pink Purple Red Yellow

Gradient Buttons

White Grey Black Aqua Blue Green Orange Pink Purple Red Yellow

Line Buttons

White Grey Black Aqua Blue Green Orange Pink Purple Red Yellow

Drop Down Button
Drop-Down Default
Drop-Down Blue


Button Sizes
Small Normal Large Extra Large

Button Shapes
Rounded (default) Pill Button Squared Button


Detailed Documentation

For a more detailed look into the available options, you can read the documentation at https://github.com/chrishumboldt/Buttonplate