Button of any type you want.
<button class="zust-btn">Normal</button>
<!--
<input type="submit"> and <input type="reset"> are Deprecated.
Use <button type="submit"></button> and <button type="reset"></button> instead.
-->
<button class="zust-btn" type="submit">Submit</button>
<button class="zust-btn" type="reset">Reset</button>
<!--
If you want to use other element as button,
add attribute `role="button"` to the element
-->
<a class="zust-btn" role="button" tabindex="0">Anchor</a>
<span class="zust-btn" role="button" tabindex="0">Span</span>
To make accessible button, do any of the following
aria-label attribute.a, span, div, then add attribute role="button" to the element and add attribute tabindex="0" to make it focusable to user.You can size them easily just by adding class zust-small, zust-ignored, zust-large and zust-xlarge.
<button class="zust-btn zust-small">Small</button>
<button class="zust-btn">Normal</button>
<button class="zust-btn zust-large">Large</button>
<button class="zust-btn zust-xlarge">xLarge</button>
You can set buttons color to any of theme colors. You can also use Colors Helper to color them. To use custom color/color helper, you have to add class zust-custom.
<button class="zust-btn zust-primary">Primary</button>
<button class="zust-btn zust-success">Success</button>
<button class="zust-btn zust-warning">Warning</button>
<button class="zust-btn zust-error">Error</button>
<button class="zust-btn zust-link">Link</button>
<button class="zust-btn zust-transparent">Transparent</button>
<button class="zust-btn zust-custom zust-bg-teal">Using Color Helper</button>
You can use icons with buttons.
<button class="zust-btn">
<span class="zust-icon">
<i class="fas fa-grin"></i>
</span>
<span>Grin</span>
</button>
<button class="zust-btn" aria-label="Filter">
<span class="zust-icon">
<i class="material-icons">filter</i>
</span>
<span>Filter</span>
</button>
<button class="zust-btn">
<span class="zust-icon">
<i class="zust-spinner"></i>
</span>
<span>Spinner</span>
</button>
<button class="zust-btn" aria-label="Wink icon button">
<span class="zust-icon">
<i class="fa fa-grin-wink"></i>
</span>
</button>
There are floating buttons as well. They look good as primary actions. Add class zust-floating.
<button class="zust-btn zust-floating">Default</button>
<button class="zust-btn zust-floating zust-primary">Primary</button>
<button class="zust-btn zust-floating zust-custom zust-bg-blue-grey">Custom</button>
You can get outlined button by using class zust-outlined. This only works with themed buttons.
<button class="zust-btn zust-outlined zust-primary">Primary</button>
<button class="zust-btn zust-outlined zust-link">Link</button>
There are even ghost buttons, use it by adding class zust-ghost. Like outlined it only works with theme buttons.
<button class="zust-btn zust-ghost zust-primary">Primary</button>
<button class="zust-btn zust-ghost zust-link">Link</button>
You can simply make any button disabled by adding attribute disabled.
<button class="zust-btn" disabled>
<span>Disabled</span>
<span class="zust-icon">
<i class="fas fa-dizzy"></i>
</span>
</button>
<button class="zust-btn zust-primary" disabled>Primary Disabled</button>
<button class="zust-btn zust-success" disabled>Success Disabled</button>
<button class="zust-btn zust-link" disabled>Link Disabled</button>
Max padding buttons have increased padding and less rounded corners. To use it add class zust-max-pad to zust-btn.
<button class="zust-btn zust-primary">Normal</button>
<button class="zust-btn zust-primary zust-max-pad">Max padding</button>
You can make button fullwidth, rounded, sharp, semi rounded. Thanks to Shape Helper.
<button class="zust-btn zust-primary zust-fullwidth">Fullwidth</button>
<button class="zust-btn zust-primary zust-rounded">Rounded</button>
<button class="zust-btn zust-primary zust-semi-rounded">Semi Rounded</button>
<button class="zust-btn zust-primary zust-sharp">Sharp</button>
You can change size or appearance of all buttons easily by adding class to their parent. Add any of these classes to parent - zust-btns-small, zust-btns-large, zust-btns-xlarge, zust-btns-fullwidth, zust-btns-custom, zust-btns-outlined, zust-btns-ghost.
You can make a button ignore it's parent's style by adding class zust-ignored to the button itself.
<div class="zust-btns-large">
<button class="zust-btn">Button</button>
<button class="zust-btn">Button</button>
<button class="zust-btn zust-ignored">Ignored Button</button>
<button class="zust-btn">Button</button>
<button class="zust-btn">Button</button>
</div>
<br>
<br>
<div class="zust-text-center zust-btns-fullwidth">
<button class="zust-btn">Button</button>
<button class="zust-btn">Button</button>
<button class="zust-btn zust-ignored">Ignored Button</button>
<button class="zust-btn">Button</button>
<button class="zust-btn">Button</button>
</div>
You can also group buttons together. Just place them inside of zust-el-group.
<div class="zust-el-group">
<button class="zust-btn zust-link">First</button>
<button class="zust-btn zust-link">Second</button>
<button class="zust-btn zust-link">Third</button>
<button class="zust-btn zust-link">Fourth</button>
</div>
You can use Zusty's built-in container to contain bunch of buttons. They will break whenever necessary.
<div class="zust-container">
<button class="zust-btn">Button</button>
<button class="zust-btn">Button</button>
<button class="zust-btn">Button</button>
<button class="zust-btn">Button</button>
<button class="zust-btn">Button</button>
<button class="zust-btn">Button</button>
<button class="zust-btn">Button</button>
<button class="zust-btn">Button</button>
<button class="zust-btn">Button</button>
<button class="zust-btn">Button</button>
<button class="zust-btn">Button</button>
<button class="zust-btn">Button</button>
</div>
A button can be toggle-able. See the snippet below.
<label class="zust-toggle-btn">
<input type="checkbox">
<span tabindex="0" role="button" class="zust-btn zust-primary">Toggle</span>
</label>
Don't use button in this scenario. You can use anything except button here, like span, a etc. Also you have to use any of colored button. It will not work on default buttons.
This makes better sense in button groups.
Choose any one option below
<p>Choose any one option below</p>
<div class="zust-el-group">
<label class="zust-toggle-btn">
<input type="radio" name="checkForBtn">
<span tabindex="0" role="button" class="zust-btn zust-link">Play</span>
</label>
<label class="zust-toggle-btn">
<input type="radio" name="checkForBtn">
<span tabindex="0" role="button" class="zust-btn zust-link">Work</span>
</label>
<label class="zust-toggle-btn">
<input type="radio" name="checkForBtn">
<span tabindex="0" role="button" class="zust-btn zust-link">Sleep</span>
</label>
<label class="zust-toggle-btn">
<input type="radio" name="checkForBtn">
<span tabindex="0" role="button" class="zust-btn zust-link">Dance</span>
</label>
</div>
