Button
Default button class is btn
. Buttons class work in HTML tag, example: a
, button
, input
, etc.
Default button
White is default button color.
<button class="btn">Button</button>
Ripple
With JavaScript the button automatic adding class js-ripple
to enable ripple. We make the ripple with 100% pure JavaScript (Vanilla JS).
Components that include the ripple is:
- Button
- Toolbar action
- Drawer menu
- Dropdown menu
- Accordion
If you want to add more ripple to other block element please add js-ripple
class.
Below is an options for the ripple.
No Ripple
The button without ripple.
<button class="btn no-ripple">Button</button>
Ripple Color
The ripple color using CSS currentColor. If you want to use other color, please use data-ripple-color
.
<button class="btn" data-ripple-color="#00bcd4">Button</button>
Ripple Opacity
Default CSS opacity the ripple is 0.4. If you want to use other values, please use data-ripple-opacity
.
<button class="btn" data-ripple-opacity="0.8">Button</button>
Ripple Radius
Default CSS border-radius the ripple is 50%. If you want to use other values, please use data-ripple-radius
.
<button class="btn" data-ripple-radius="20%">Button</button>
Tags
Note: The ripple not working on input
.
<a href="#" class="btn">Link</a> <button class="btn" type="submit">Button</button> <input class="btn" type="button" value="Input"/> <input class="btn" type="submit" value="Submit"/> <input class="btn" type="reset" value="Reset"/> <input class="btn-upload" type="file" id="file"/> <label for="file" class="btn" role="button">Upload</label>
Colors
The button colors like a Bootstrap or Bulma.
<button class="btn btn-dark">Button Dark</button> <button class="btn btn-light">Button Light</button> <button class="btn btn-primary">Button Primary</button> <button class="btn btn-secondary">Button Secondary</button> <button class="btn btn-info">Button Info</button> <button class="btn btn-warning">Button Warning</button> <button class="btn btn-danger">Button Danger</button> <button class="btn btn-success">Button Success</button>
FAB (Floating Action Button)
FAB (Floating Action Button) will work if using the default class and combined with btn-fab
.
<button class="btn btn-fab"><i aria-hidden="true" class="mdi mdi-plus"></i></button> <button class="btn btn-fab btn-primary"><i aria-hidden="true" class="mdi mdi-plus"></i></button> <button class="btn btn-fab btn-secondary"><i aria-hidden="true" class="mdi mdi-plus"></i></button>
Sizes
The button sizes available only small, medium (default) and large.
<button class="btn btn-small btn-primary">Button Small</button> <button class="btn btn btn-primary">Button Default Size</button> <button class="btn btn-large btn-primary">Button Large</button> <button class="btn btn-fab btn-small btn-secondary"><i aria-hidden="true" class="mdi mdi-plus"></i></button> <button class="btn btn-fab btn-secondary"><i aria-hidden="true" class="mdi mdi-plus"></i></button> <button class="btn btn-fab btn-large btn-secondary"><i aria-hidden="true" class="mdi mdi-plus"></i></button>
Flat
Flat button will work if using the default class and combined with btn-flat
.
<button class="btn btn-flat">Button</button> <button class="btn btn-flat btn-primary">Button Primary</button> <button class="btn btn-flat btn-secondary">Button Secondary</button>
Raised
Raised button will work if using the default class and combined with btn-raised
.
<button class="btn btn-raised">Button</button><button class="btn btn-raised btn-primary">Button Primary</button> <button class="btn btn-raised btn-secondary">Button Secondary</button>
Outline
Outline button will work if using the default class and combined with btn-flat
and btn-outline
.
<button class="btn btn-flat btn-outline">Button</button> <button class="btn btn-flat btn-outline btn-primary">Button Primary</button> <button class="btn btn-flat btn-outline btn-secondary">Button Secondary</button> <button class="btn btn-flat btn-outline btn-info">Button Info</button> <button class="btn btn-flat btn-outline btn-warning">Button Warning</button> <button class="btn btn-flat btn-outline btn-danger">Button Danger</button> <button class="btn btn-flat btn-outline btn-success">Button Success</button>
Gradient
Gradient button color only Primary and Secondary.
<button class="btn btn-gradient btn-gradient-primary">Button Primary</button> <button class="btn btn-gradient btn-gradient-secondary">Button Secondary</button>
Round
Round button will work if using the default class and combined with btn-round
.
<button class="btn btn-round btn-raised btn-secondary">Button Round</button>
Center
<div class="btn-center"> <button class="btn btn-raised btn-secondary">Button Center</button> </div>
Button full width
<button class="btn btn-block btn-raised btn-secondary">Button Full Width</button>
Icons
Combination the button with Material Design Icons.
Right icons
<button class="btn btn-raised btn-success">Button Download<i aria-hidden="true" class="icon-right mdi mdi-cloud-download"></i></button> <button class="btn btn-raised btn-warning">Button Send<i aria-hidden="true" class="icon-right mdi mdi-send"></i></button> <button class="btn btn-raised btn-secondary">Button Home<i aria-hidden="true" class="icon-right mdi mdi-home"></i></button> <button class="btn btn-raised btn-dark">Button GitHub<i aria-hidden="true" class="icon-right mdi mdi-github-circle"></i></button> <button class="btn btn-raised btn-dark">Button Codepen<i aria-hidden="true" class="icon-right mdi mdi-codepen"></i></button> <button class="btn btn-raised btn-dark">Button Document<i aria-hidden="true" class="icon-right mdi mdi-file-document-box"></i></button> <button class="btn btn-raised btn-success btn-small">Button Download<i aria-hidden="true" class="icon-right mdi mdi-cloud-download"></i></button> <button class="btn btn-raised btn-warning btn-large">Button Send<i aria-hidden="true" class="icon-right mdi mdi-send"></i></button>
Left icons
<button class="btn btn-raised btn-success"><i aria-hidden="true" class="icon-left mdi mdi-cloud-download"></i>Button Download</button> <button class="btn btn-raised btn-warning"><i aria-hidden="true" class="icon-left mdi mdi-send"></i>Button Send</button> <button class="btn btn-raised btn-secondary"><i aria-hidden="true" class="icon-left mdi mdi-home"></i>Button Home</button> <button class="btn btn-raised btn-dark"><i aria-hidden="true" class="icon-left mdi mdi-github-circle"></i>Button GitHub</button> <button class="btn btn-raised btn-dark"><i aria-hidden="true" class="icon-left mdi mdi-codepen"></i>Button Codepen</button> <button class="btn btn-raised btn-dark"><i aria-hidden="true" class="icon-left mdi mdi-file-document-box"></i>Button Document</button> <button class="btn btn-raised btn-success btn-small"><i aria-hidden="true" class="icon-left mdi mdi-cloud-download"></i>Button Download</button> <button class="btn btn-raised btn-warning btn-large"><i aria-hidden="true" class="icon-left mdi mdi-send"></i>Button Send</button>
Disabled
The button with HTML disabled Attribute.
<button class="btn btn-large" disabled="disabled">Button</button> <button class="btn" disabled="disabled">Button</button> <button class="btn btn-flat" disabled="disabled">Button</button> <button class="btn btn-flat btn-outline" disabled="disabled">Button</button> <button class="btn btn-fab" disabled="disabled"><i aria-hidden="true" class="mdi mdi-plus"></i></button>
Customize
Customize the button for a posts.
<div class="btn-wrap"> <div class="btn-center"> <a href="#" class="btn btn-raised btn-secondary"><i aria-hidden="true" class="icon-left mdi mdi-eye"></i>Demo</a> <a href="#" class="btn btn-raised btn-primary"><i aria-hidden="true" class="icon-left mdi mdi-cloud-download"></i>Download</a> <a href="#" class="btn btn-raised btn-dark"><i aria-hidden="true" class="icon-left mdi mdi-file-document-box"></i>Document</a> <a href="#" class="btn btn-raised btn-success"><i aria-hidden="true" class="icon-left mdi mdi-cart"></i>Buy</a> </div> </div>
Comment disabled