Css3 özellikleri kullanılarak baskı efektli çeşitli genişlikte ki buton örneklerinin nasıl oluşturduğunu göstermek istiyorum.

Butonlar web sitelerinin önemli öğelerinden biridir. Web sitelerine farklı bir görsellik ve işlevsellik kattıkları tartışılmaz. Butonları; bir hizmet hakkında daha fazla bilgi edinmek, alışveriş sepetimize ürün eklemek ve iletişim formları göndermek ve daha birçok işlem için kullanırız.

Butonların kullanıcı hareketine göre çeşitli halleri vardır.

  • Aktif hali: Butonun aktif hali.
  • Hover hali: Fare üzerine geldiğinde ki hali.
  • Focus hali: Buton üzerine odaklanma durumundaki hali.
Yapacağımız örnekde butonumuza  tıkladığımızda buton içeriye  batıyor ve  fareyi geri çektiğimizde tekrar eski haline  dönüyor. Böylece butonun  biraz daha gerçekçi görünmesi sağlanmoş oluyor.

Butona derinlik vermek için gölgeler kullanılmış olup, gölgeye arkaplandan daha koyu renk verilmiştir. Bu da butonumuza daha fazla derinlik katmıştır.

Gradient ve box-shadow özellikleri kullanılarak butonlara yeni bir stil efektleri eklenmiştir. Her gölge arasına virgül konularak butonlara birden fazla gölge eklenmiştir.


Örnek-1




Örnek-2