Sadece Css kullanılarak hazırlanmış olan bu buton örnekleri 3D görünümde tıklanabilir özelliğe sahip. Kullanımı oldukça kolay ve isterseniz örneklere seçili (active diye yazılmış css içinde ) sınıfını atayarak hangi butonların tıklanmış olduğunuda belirleyebiliyorsunuz. Active özelliği; ziyaretçinin tıkladığı butonun veya incelediği sayfanın tıklanmış bir şekilde durmasını sağlayan özelliktir.
Daha önceleri buna benzer türkçe içeriklerde paylaşmıştık hatırlarsanız. Daha çok ziyaretçinin hangi kategoriyi incelediğini unutmaması için kullanılan bir özelliktir. Geliştirici adını bir türlü bulamadım malesef. Buton örnekleri Cssflow sitesi tarafından hazırlanmış olup mit lisansı altında yayınlanıyor. Bu demek oluyorki buton örneklerini dilediğiniz gibi kullanabilirsiniz. Ben yaptım da diyebilirsiniz ama biraz emeğe saygı göstermekte fayda var. Source sayfasından download adresine ulaşabilirsiniz.
Kullanım
- Head etiketleri arasına eklemeniz gereken bölüm.
Css dosya url adresi :
<link rel="stylesheet" href="css/style.css">
- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
<section class="container"> <a href="index.html" class="button">Start</a> <a href="index.html" class="button button-green">Start</a> <a href="index.html" class="button button-red">Start</a><br> <a href="index.html" class="button hover">Start</a> <a href="index.html" class="button button-green hover">Start</a> <a href="index.html" class="button button-red hover">Start</a><br> <a href="index.html" class="button active">Start</a> <a href="index.html" class="button button-green active">Start</a> <a href="index.html" class="button button-red active">Start</a> </section>