Foundation 6 Buton Oluşturma

  • 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.

Foundation Temel Buton Kullanımı

<a href="about.html" class="button">Hakkkımızda</a>
<a href="#home" class="button">Anasayfaya Git</a>

<button type="button" class="success button">Kaydet</button>
<button type="button" class="alert button">Sil</button>
Foundation Buton Oluşturma

Foundation Buton Boyut Ayarlama

Foundation 6’da button class’ı ile birlikte tiny, small, large ,expanded, small expanded classlarını kullanarak butonumuzu boyutlandırabiliriz.

small ile normal/varsayılan butondan daha küçük, tiny ile biraz daha küçük, large ile de daha büyük butonlar oluşturabiliriz.

expanded ile de tüm satırı kaplayacak biçimde buton oluşturabiliriz.

<a class="button tiny" href="#">Buton</a>

<a class="button small" href="#">Buton</a>

<a class="button" href="#">Buton</a>

<a class="button large" href="#">Buton</a>

<a class="button expanded" href="#">Buton</a>

<a class="button small expanded" href="#">Buton</a>
Foundation Buton Oluşturma

Foundation Buton Renklerdirme

Buton classlarını kullanarak hızlı ve basit bir şekilde buton oluşturulabilir. Bu classlardan biri ile buton oluşturduktan sonra onu istediğimiz şekilde düzenleyebiliriz.

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.

<a class="button primary" href="#">Primary</a>

<a class="button secondary" href="#">Secondary</a>

<a class="button success" href="#">Success</a>

<a class="button alert" href="#">Alert</a>

<a class="button warning" href="#">Warning</a>
Foundation Buton Oluşturma

Foundation İçi Boş Butonlar

Foundation’da içi boş yani kenarlıklı butonlar oluşturmak için hollow class’ı kullanılır.

<button class="hollow button" href="#">Primary</button>

<button class="hollow button secondary" href="#">Secondary</button>

<button class="hollow button success" href="#">Success</button>

<button class="hollow button alert" href="#">Alert</button>

<button class="hollow button warning" href="#">Warning</button>

<button class="hollow button" href="#" disabled>Disabled</button>
Foundation Buton Oluşturma

Foundation Pasif Butonlar (Disabled Buttons)

Foundation’da disabled özelliği ile birlikte butonlar tıklanamaz ve kullanılamaz duruma getirilebilir. Pasif haldeki bu butonlar soluk halde görünür ve bu sayede kolaylıkla tıklanamaz olduğu anlaşılabilir.

<a class="button disabled" href="#" aria-disabled>Disabled</a>

<button type="button" class="button primary" disabled>Disabled</button>

<button type="button" class="button secondary" disabled>Disabled</button>

<button type="button" class="button success" disabled>Disabled</button>

<button type="button" class="button alert" disabled>Disabled</button>

<button type="button" class="button warning" disabled>Disabled</button
Foundation Buton Oluşturma

Foundation Sade Butonlar (Clear Style)

Foundation’da arkaplan ya da kenarlık olmadan buton oluşturmak için clear class’ı kullanılabilir. Ayrıca butonun yazı rengi primary, secondary, success , alert, warning classları ile birlikte verilebilir.

<a class="clear button" href="#">Primary</a>

<a class="clear button secondary" href="#">Secondary</a>

<a class="clear button success" href="#">Success</a>

<a class="clear button alert" href="#">Alert</a>

<a class="clear button warning" href="#">Warning</a>

<a class="clear button" href="#" disabled>Disabled</a>
Foundation Buton Oluşturma
275 Views
41990cookie-checkFoundation 6 Buton Oluşturma

Leave a Reply

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