Everything you can do with Beauter


Buttons can be created using the following various methods with .button base class, <button> tag, or by <input type="button | submit | reset">.

<a class="button">Button</a>
<input type ="button" value="Button">

There are a lot of options for buttons. Different types, shape, colors and sizes. You can mixup all on your choice.

Using modifiers like _primary, _success, _shadow, _box etc will further shape and alter the design of the buttons. Learn more here.

<button>Simple Button</button>
<button class="_box">Box Button</button>
<button class="_round">Round Button</button>
<button class="_primary">Primary Button</button>
<button class="_disabled">Disabled Button</button>
<button class="_success">Success Button</button>
<button class="_danger">Danger Button</button>
<button class="_pink">Warning Button</button>
<button class="_info">Info Button</button>
<button class="_xsmall">Tiny Button</button>
<button class="_small">Small Button</button>
<button>Regular Button</button>
<button class="_large">Large Button</button>
<button class="_xlarge">Extra Large Button</button>

You can also use these layers to make mixups.

<button class="_danger _xlarge _round _disabled">Button</button>

Sitemap ..

Code licensed under MIT
Docs under CC BY NC SA 4.0.
Designed with
outboxcraft logoOutboxcraft
© 2017