CSS Düğmeleri: Öğreticiler ve Örnekler
CSS ile butonlar oluşturmak, en çok deneyimlenen web tasarım tekniklerinden biridir. Örnekler ve öğreticiler boldur.
CSS buton tasarımındaki en yeni trend, görüntülerin, özellikle de arka plan görüntülerinin düğmelerden kaldırılması gibi görünüyor. Ancak tasarımcıların düğmelerle yaptıkları birçok şey var, bazıları da görüntüleri içeriyor.
Aşağıda, çoğu CSS3 kullanan CSS düğmeleri oluşturmak için yirmiden fazla ders, örnek ve araç topladık.
Dahil olan her tasarım stiline uygun düğmelerdir. Burada yeni tekniklere odaklanmaya çalıştık; sürgülü kapı metodu çoğu tasarımcının zaten aşina olduğu yuvarlanmış köşeler oluşturmak için.
Paylaşmak istediğiniz diğer dersleriniz veya örnekleriniz varsa, lütfen yorumlarda bunu yapın!
Öğreticiler ve makaleler
Düğme elemanını yeniden keşfetme
Tartışırken gerçekten yararlı bir makale button Tasarımcılar tarafından genellikle gözden kaçan CSS öğesi. Biraz daha büyük, ancak yine de CSS ile daha şık düğmeler oluşturma konusunda yararlı bilgiler.
Icon set ile güzel CSS düğmeleri
Simgelerle düğmelerin nasıl oluşturulacağı ile ilgili bir başka makale span sınıflar yerine button öğesi.
Kick-ass pratik CSS3 düğmeler inşa
Nettuts + 'daki bu video öğretici, bir Twitter kuş simgesi görüntüsü gibi görünen, hatta CSS3 ile tamamen oluşturulan pratik CSS3 düğmelerinin nasıl oluşturulacağını gösterir.
CSS3 ile Güzel Photoshop benzeri düğmeler
Buradaki düğmeler özellikle görünüm açısından ileriye dönük olmasa da, şaşırtıcı olan şey, CSS3 kullanılarak tamamen oluşturuldukları, bir resim kullanılmadan oluşturuldukları ve sadece Photoshop'ta oluşturulmuş düğmelere dayalı olduğu.
Daha iyi düğme ve navigasyon etkileşimleri
Bu, Darren Hoyt'un ziyaretçilerin sitenizle etkileşime geçmesini teşvik eden düğmeleriniz için daha iyi davranışlar oluşturma konusunda harika, basit bir eğiticidir.
CSS3 ve RGBA ile süper harika düğmeler
Zurb'nin bu öğreticisi, sadece tek bir PNG görüntüsüyle ölçeklenebilir düğmeler oluşturmak için RGBA'yı kullanarak CSS3 ve alfa harmanlamayı kullanmaktadır.
CSS geçişleri ile güzel düğmeler oluşturma
Firefox Personas için Mozilla tarafından kullanılanlara benzer CSS gradyanlarını kullanarak bir düğme oluşturmak için bir eğitici.
CSS kullanarak seksi bir düğme nasıl tasarlanır
Bu eğitici, görüntüleri kullanmadan büyük, canlı bir düğmenin nasıl oluşturulacağını gösterir.
Gerçekçi görünümlü CSS3 düğmeleri
Bunlar, bazı sahte öğeler de dahil olmak üzere tamamen CSS3 ile oluşturulan basit düğmelerdir.
Pretty CSS3 düğmeleri
Bu eğitimde, ölçeklendirilebilen ve görüntü olmadan herhangi bir renkte oluşturulabilen, basit, hafif parlak bir düğme nasıl oluşturulacağı gösterilmektedir.
Herhangi bir görüntü olmadan CSS3 düğmeleri
Sadece CSS3 kullanan ve hiçbir görüntü içermeyen dinamik düğmeler oluşturmak için basit bir öğretici. Her düğme için, engellenen, gezinen ve tıklanan durumlar dahil olmak üzere dört durum vardır.
Dinamik CSS yuvarlak köşeleri 5 farklı eğitici bağlantı düğmeleri
Bu, yuvarlatılmış köşeleri olan CSS düğmeleri oluşturmak için beş farklı eğiticiden oluşan bir koleksiyon. İkisi de görüntülerin kullanımını içeriyor, ancak diğer üçü de yok.
Güzelce bozulan bir CSS3 düğmesi oluşturun
Tüm tarayıcılar CSS3'ü doğru bir şekilde destekleyene kadar, düğmeler gibi şeyler oluşturmak için kullanırken sorunları yaşayacağız. Bu eğitici, IE6 ve 7 gibi eski tarayıcılarda da iyi görünen harika CSS3 düğmelerinin nasıl oluşturulacağını gösterir.
Apple'ın yalnızca CSS kullanarak gezinme çubuğu
Bu eğitici, Apple'ın web sitesinde düğme tarzı gezinme menüsünün nasıl yeniden oluşturulacağını gösterir. Safari 3 + 'da en iyi çalışır, ancak diğer tarayıcılarda hala iyi görünüyor.
Bir CSS3 harekete geçirici mesaj düğmesi oluşturun
Bu eğitici, farklı varsayılan ve duraklama durumlarını içeren CSS ile tamamen bir harekete geçirme ifadesinin nasıl oluşturulacağını gösterir.
CSS3 ile seksi düğmeler
Bu basit öğretici, benzersiz vurgulu ve aktif durumlara sahip güzel stilli düğmelerin nasıl oluşturulacağını gösterir. Düğmeler ölçeklendirilebilir ve renkleri kolayca değiştirilebilir.
Yalnızca CSS3 kullanarak resim olmadan parlak düğmeler
Bu düğmelere baktığımızda, çok yakından bakmadığınız sürece resimler olmadan yapıldığına inanmak zor. Kod karmaşıktır, ancak sonuç, hover efekti ile birlikte mükemmel görünür.
Simgeleri ile CSS3 düğmeleri
Bu eğitici, simge görüntülerini içeren ve çapraz tarayıcı uyumlu olan degradelerle CSS3 düğmelerinin nasıl oluşturulacağını gösterir.
Kendi Google düğmelerinizi hazırlayın
Bu eğitici, renkli kenarlıklı, ölçeklenebilir Google stili düğmelerin nasıl yapıldığını gösterir. Son sonuçlar minimalist ve temiz.
Örnekler ve araçlar
Web sitenizde kullanmak için 10 harika CSS3 düğmesi
Web sitenizde kullanabileceğiniz on adet butondan oluşan bir koleksiyon. Hepsi oldukça basit, ancak hiçbir görüntü olmadan sadece CSS3 kullanılarak oluşturuldu.
CSS3 degrade düğmeleri
Bu, Web Tasarımcı Duvarından CSS3 düğmelerinin devasa bir koleksiyonudur. Dahil olan tüm şekiller, boyutlar ve renkler, hepsi degradelerle birlikte. Bununla ilgili en iyi parçalardan biri de, bu düğmelerin tam CSS3 desteğine sahip olmayan tarayıcılarda nasıl küçük düşürüldüğü.
Düğme yapımcısı
CSS-Tricks, bu ücretsiz CSS3 düğme yaratıcısını sunuyor. Sadece düğmenin her bir durumu, boyutu ve metin özellikleri için arka plan renklerini tanımlayın ve sizin için CSS kodunu oluşturacaktır.
Radyoaktif düğmeler
Bu düğmeler darbeli ve parlak bir efekt oluşturmak için Safari'deki CSS animasyonlarını kullanır. CSS3'ü destekleyen diğer tarayıcılarda, yine de mükemmel şekilde çalışırlar ve iyi görünürler.
Burada belirtilmemiş harika CSS düğmeleri oluşturmak için diğer teknikleri biliyor musunuz? Veya favori bir örneğiniz var mı? Lütfen bunları yorumlarda paylaşın!