Everything you can do with Beauter


Buttons can be build 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="_active">Active Button</button>
<button class="_success">Success Button</button>
<button class="_danger">Danger Button</button>
<button class="_warning">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="_info _xsmall _round _disabled">Button</button>


  • New 'Examples' section coming with wonderful tutorials!
  • Adding animations and transitions effects soon.
  • 0.3 development started. Join us here.

Get Involved

Your contribution can make beauter more beautiful. Visit Github to collaborate.

Star Fork

Sitemap Designed with by Shubham Ramdeo
Follow @ramdeoshubham
outboxcraft logoOutboxcraft
© 2017