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

Tıklandığında

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>

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-06-07 tarihinde yayınlandı,Toplam 1535 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...