Buttons

You can use buttons created in different sizes, types and colors.

Main

<button class="btn">button</button>
<button class="btn btn-outline">outlined</button>
<button class="btn btn-clear">clear</button>
<button class="btn" disabled>disabled</button>

Sizes

<button class="btn btn-small">small</button>
<button class="btn">normal</button>
<button class="btn btn-large">large</button>
<button class="btn btn-full-width">full-width</button>

Colors & Types

<div>
  <button class="btn btn-blue">blue</button>
  <button class="btn btn-blue btn-outline">blue</button>
  <button class="btn btn-blue btn-clear">blue</button>
  <button class="btn btn-blue" disabled>blue</button>
</div>
<div>
  <button class="btn btn-yellow">yellow</button>
  <button class="btn btn-yellow btn-outline">yellow</button>
  <button class="btn btn-yellow btn-clear">yellow</button>
  <button class="btn btn-yellow" disabled>yellow</button>
</div>
<div>
  <button class="btn btn-green">green</button>
  <button class="btn btn-green btn-outline">green</button>
  <button class="btn btn-green btn-clear">green</button>
  <button class="btn btn-green" disabled>green</button>
</div>
<div>
  <button class="btn btn-red">red</button>
  <button class="btn btn-red btn-outline">red</button>
  <button class="btn btn-red btn-clear">red</button>
  <button class="btn btn-red" disabled>red</button>
</div>

Other Types

<a class="btn" href="#" type="button">Link</a>
<input class="btn" type="button" value="Input" />
© 2019, Built with  🎧☕️❤️& Gralig.