Foundation 6 Buton Grupları

  • Foundation’ın gereksinimlerinize uyacak şekilde özelleştirebileceğiniz ve kullanımı kolay birçok button stili vardır.
  • Buton oluşturmak için <a> etiketi kullanılabileceği gibi <button> etiketi de kullanılabilir. <a> etiketi ile oluşturduğumuz buton sayesinde başka sayfaya link verebiliriz.
  • Buton Grup Classları ile birden fazla buton tanımlayıp gruplandırabiliriz.

Buton Grupları Renklerdirme

Aşağıdaki örnekte olduğu gibi butonları renklerdirmek için class özelliğine button ile birlikte primary, secondary, success, alert ve warning classları eklenebilir.

primary ile birlikte mavi buton, secondary ile gri buton, success ile yeşil buton, alert ile kırmızı buton, warning ile de sarı buton oluşturabiliriz.

<div class="button-group">
  <a class="secondary button">Secondary </a>
  <a class="success button">Success </a>
  <a class="warning button">Warning </a>
  <a class="alert button">Alert </a>
</div>
Foundation Buton Oluşturma

Yukarıdaki örnekte buton grupları içerisinde yer alan butonlar farklı şekilde renklendirilmiştir. Aşağıdaki örnekte ise button-grop class’ı ile birlikte vermek istediğimiz rengin class’ı birlikte kullanılarak butonların her birinin verdiğimiz class renginde aynı şekilde olması sağlanmıştır.

<div class="secondary button-group">
  <a class="button">Secondary</a>
  <a class="button">Secondary</a>
  <a class="button">Secondary</a>
  <a class="button">Secondary</a>
</div>
Foundation Buton Oluşturma
247 Views
55920cookie-checkFoundation 6 Buton Grupları

Leave a Reply

Your email address will not be published. Required fields are marked *