Buttons

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

Main

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

Sizes

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

Colors & Types

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

Other Types

Link

<a class="gra-btn" href="#" type="button">Link</a>
<input class="gra-btn" type="button" value="Input" />