avatar

Güzel Bir Buton Seti
Bir arkadaşımın hazırladığı güzel bir buton seti: Flat Button Pack

19/07/2014
Hakan Özakar

Flat Button Pack

Bir arkadaşımın oyalanmak için boş zamanında hazırladığı bir buton setini paylaşmak istiyorum. Tamamen CSS3 kullanılarak hazırlanmış bu buton seti CC lisanslı. Yani istediğiniz gibi kullanabilir, geliştirebilir, değiştirebilirsiniz. İndirmek için: https://github.com/yunusbassahan/flat-button-pack

 

Flat Button Pack

 

Kullanım:

Öncelikle indirdiğiniz paketteki "flat-buttons.css"  dosyasını head bölümünde include etmelisiniz.

<link rel="stylesheet" href="flat-buttons.css">

 

Daha sonra sayfanızdaki butonlarda aşağıdaki class'ları kullanabilirsiniz.

 

Çok Küçük Boyut

<button class="flat xs grey">Gri</button>  
<button class="flat xs green">Yeşil</button>  
<button class="flat xs purple">Mor</button>  
<button class="flat xs navy-blue">Lacivert</button>  
<button class="flat xs pink">Pembe</button>  
<button class="flat xs blue">Mavi</button>  
<button class="flat xs yellow">Sarı</button>  

 

Küçük Boyut

<button class="flat sm grey">Gri</button>  
<button class="flat sm green">Yeşil</button>  
<button class="flat sm purple">Mor</button>  
<button class="flat sm navy-blue">Lacivert</button>  
<button class="flat sm pink">Pembe</button>  
<button class="flat sm blue">Mavi</button>  
<button class="flat sm yellow">Sarı</button>  

 

Orta Boyut

<button class="flat md grey">Gri</button>  
<button class="flat md green">Yeşil</button>  
<button class="flat md purple">Mor</button>  
<button class="flat md navy-blue">Lacivert</button>  
<button class="flat md pink">Pembe</button>  
<button class="flat md blue">Mavi</button>  
<button class="flat md yellow">Sarı</button>  

 

Büyük Boyut

<button class="flat lg grey">Gri</button>  
<button class="flat lg green">Yeşil</button>  
<button class="flat lg purple">Mor</button>  
<button class="flat lg navy-blue">Lacivert</button>  
<button class="flat lg pink">Pembe</button>  
<button class="flat lg blue">Mavi</button>  
<button class="flat lg yellow">Sarı</button>  

 

Güle güle kullanın. Yunus'un blogu için: http://yunusbassahan.com/

 

Yorumlar Yorum Yap