Buttons
Button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Default Buttons
Code Here:
<div class="button-group">
<button type="button"
class="btn waves-effect waves-light btn-primary">Primary</button>
<button type="button"
class="btn waves-effect waves-light btn-secondary">Secondary</button>
<button type="button"
class="btn waves-effect waves-light btn-success">Success</button>
<button type="button" class="btn waves-effect waves-light btn-info">Info</button>
<button type="button"
class="btn waves-effect waves-light btn-warning">Warning</button>
<button type="button"
class="btn waves-effect waves-light btn-danger">Danger</button>
<button type="button" class="btn waves-effect waves-light btn-light">Light</button>
<button type="button" class="btn waves-effect waves-light btn-dark">Dark</button>
</div>
Light Buttons
Code Here:
<div class="button-group">
<button type="button" class="btn waves-effect waves-light btn-light-primary text-primary">Primary</button>
<button type="button" class="btn waves-effect waves-light btn-light-secondary text-secondary">Secondary</button>
<button type="button" class="btn waves-effect waves-light btn-light-success text-success">Success</button>
<button type="button" class="btn waves-effect waves-light btn-light-info text-info">Info</button>
<button type="button" class="btn waves-effect waves-light btn-light-warning text-warning">Warning</button>
<button type="button" class="btn waves-effect waves-light btn-light-danger text-danger">Danger</button>
</div>
Rounded Light Buttons
Code Here:
<div class="button-group">
<button type="button" class="btn waves-effect waves-light btn-rounded btn-light-primary text-primary">Primary</button>
<button type="button" class="btn waves-effect waves-light btn-rounded btn-light-secondary text-secondary">Secondary</button>
<button type="button" class="btn waves-effect waves-light btn-rounded btn-light-success text-success">Success</button>
<button type="button" class="btn waves-effect waves-light btn-rounded btn-light-info text-info">Info</button>
<button type="button" class="btn waves-effect waves-light btn-rounded btn-light-warning text-warning">Warning</button>
<button type="button" class="btn waves-effect waves-light btn-rounded btn-light-danger text-danger">Danger</button>
</div>