Mintik
3 yıl önce

Tıklandığında içeri batan buton tasarımı

Button

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>

 

Mintik senin düşüncelerini merak ediyor. Bir yorum yaz