Butonlar

Farklı boyutlarda, tiplerde ve renklerde oluşturulmuş butonları kullanabilirsiniz.

Temel

<button class="gra-btn">buton</button>
<button class="gra-btn gra-btn-outline">dış kenarlı</button>
<button class="gra-btn gra-btn-clear">temiz</button>
<button class="gra-btn" disabled>devre dışı</button>

Boyutlar

<button class="gra-btn gra-btn-small">küçük</button>
<button class="gra-btn">normal</button>
<button class="gra-btn gra-btn-large">büyük</button>
<button class="gra-btn gra-btn-full-width">tam genişlik</button>

Renkler & Tipler

<div>
  <button class="gra-btn gra-btn-blue">mavi</button>
  <button class="gra-btn gra-btn-blue gra-btn-outline">mavi</button>
  <button class="gra-btn gra-btn-blue gra-btn-clear">mavi</button>
  <button class="gra-btn gra-btn-blue" disabled>mavi</button>
</div>
<div>
  <button class="gra-btn gra-btn-yellow">sarı</button>
  <button class="gra-btn gra-btn-yellow gra-btn-outline">sarı</button>
  <button class="gra-btn gra-btn-yellow gra-btn-clear">sarı</button>
  <button class="gra-btn gra-btn-yellow" disabled>sarı</button>
</div>
<div>
  <button class="gra-btn gra-btn-green">yeşil</button>
  <button class="gra-btn gra-btn-green gra-btn-outline">yeşil</button>
  <button class="gra-btn gra-btn-green gra-btn-clear">yeşil</button>
  <button class="gra-btn gra-btn-green" disabled>yeşil</button>
</div>
<div>
  <button class="gra-btn gra-btn-red">kırmızı</button>
  <button class="gra-btn gra-btn-red gra-btn-outline">kırmızı</button>
  <button class="gra-btn gra-btn-red gra-btn-clear">kırmızı</button>
  <button class="gra-btn gra-btn-red" disabled>kırmızı</button>
</div>

Diğer Tipler

Link

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