Bu gün yaratacağız takım güzel simgeler olan bir site için CSS kullanarak 3 ve animasyonlar... Bu buton sayesinde, sayfadaki herhangi bir bağlantıyı basit bir sınıf adı ataması ile hareketli bir butona dönüştürebilirsiniz. Genel olarak, burada ilk bakışta karmaşık bir şey yoktur.

Bu düğmelerin ücretsiz olduğunu ve yapabileceğinizi hatırlatmama izin verin. Ücretsiz indirin... Gitmek.

Web siteniz için animasyonlu CSS3 düğmeleri

Şimdi düğmelerin boyutu ve yuvarlatılmış köşeleri hakkında birkaç söz:

/ * Üç düğme boyutu * / .button.big (font-size: 30px;) .button.medium (font-size: 18px;) .button.small (font-size: 13px;) / * Yuvarlak düğme köşeleri * / .button.rounded (-moz-border-radius: 4em; -webkit-border-radius: 4em; border-radius: 4em;)

Yukarıdaki kodda üç sınıf vardır - bunlar büyük, orta ve küçük... Buna göre, koyduğumuz her sınıf için Farklı anlamlar piksel cinsinden. Yukarıdaki kodda her şey açıkça görülmektedir.

Şimdi eğlenceli kısım renkler. Burada da prensipte karmaşık bir şey yoktur.

/ * Mavi düğme * / .blue.button (renk: # 0f4b6d! Önemli; kenarlık: 1px düz # 84acc3! Önemli; / * Geri dönüş arka plan rengi * / arka plan rengi: # 48b5f2; arka plan resmi: url ("button_bg. png "), url (" button_bg.png "), -moz-radyal-gradyan (orta alt, daire, rgba (89.208.244,1) 0, rgba (89.208.244,0) 100px), -moz-doğrusal-gradyan (# 4fbbf7, # 3faeeb); arka plan resmi: url ("button_bg.png"), url ("button_bg.png"), -webkit-gradient (radyal, %50 %100, 0, %50 %100, 100, itibaren (rgba (89,208,244,1)), ila (rgba (89,208,244,0))), -webkit-gradient (doğrusal, %0 %0, %0 %100, (# 4fbbf7)'den (# 3faeeb)'e); ) .blue.button: vurgulu (arka plan rengi: # 63c7fe; arka plan resmi: url ("button_bg.png"), url ("button_bg.png"), -moz-radyal-gradyan (orta alt, daire, rgba (109,217,250,1) 0, rgba (109,217,250,0) 100 piksel), -moz-doğrusal-gradyan (# 63c7fe, # 58bef7); arka plan resmi: url ("button_bg.png"), url ("button_bg.png" ), -webkit-gradient (radyal, %50 %100, 0, %50 %100, 100, - (rgba (109,217,250,1)), ila (rgba (109.21) 7,250,0))), -webkit-gradient (doğrusal, %0 %0, %0 %100, (# 63c7fe), ila (# 58bef7)); )

Şimdilik bu kadar. Sizi önceden uyarmak istiyorum, şu anda düğmeler bazı tarayıcılarda çalışmayabilir, çünkü henüz hepsi CSS3'ü desteklememektedir. Ama bana öyle geliyor ki bu sorun yakında çözülecek.

Düğmelerle uğraşmadan önce, hepsinde ortak olan ayarlara bakalım.

HTML

Düğmeler için çok kullanılacak basit HTML kod:

Abone olmak

CSS

Ayrıca tüm düğmeler Genel Ayarlar etiket metni ve bağlantıların seçimini kaldırmak için:

ButtonText (font: 18px / 1.5 Helvetica, Arial, sans-serif; renk: #fff;) a (renk: #fff; metin-dekorasyon: yok;)

Tipik olarak, kullanıcı bir bağlantı veya düğmenin üzerine geldiğinde oldukça hafif bir etki bekler. Bizim durumumuzda, düğme boyutu değişir - ek bir mesaj göstererek büyür.

Temel CSS kodu

Başlamak için, butona sadece bir şekil ve renk vermemiz gerekiyor. Yüksekliği 28 piksele ve genişliği 115 piksele ayarlayın, kenar boşlukları ve dolgu ekleyin ve düğmeye hafif bir kenarlık verin.

# button1 (arka plan: # 6292c2; kenarlık: 2 piksel düz #eee; yükseklik: 28 piksel; genişlik: 115 piksel; kenar boşluğu: 50 piksel 0 0 50 piksel; dolgu: 0 0 0 7 piksel; taşma: gizli; ekran: blok;)

CSS3 Efektleri

Bazı insanlar, basit bir butona çok sayıda CSS eşlik ettiğinde bundan hoşlanır. V bu bölüm düğmemiz için ek CSS3 stilleri sağlar. Onlarsız yapabilirsiniz, ancak düğmeye daha modern bir görünüm verirler.

Çerçevenin köşelerini yuvarlayın ve bir degrade ekleyin. İşte herhangi bir arka plan rengiyle çalışan küçük bir karanlık gradyan numarası.

/ * Yuvarlatılmış köşeler * / -webkit-border-radius: 15px; -moz-border-radius: 15 piksel; sınır yarıçapı: 15 piksel; / * Gradient * / background-image: -webkit-linear-gradient (üst, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); arka plan görüntüsü: -moz-doğrusal-gradyan (üst, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); arka plan görüntüsü: -o-doğrusal-gradyan (üst, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); arka plan görüntüsü: -ms-doğrusal-gradyan (üst, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); arka plan görüntüsü: doğrusal gradyan (üst, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2));

CSS animasyonu

Şimdi yükleyelim CSS geçişi... Animasyon, herhangi bir özellik değişikliği için kullanılacak ve yarım saniye sürecektir.

fareyle üzerine gelme

Geriye kalan tek şey, üzerine geldiğinizde düğmeyi genişletmek için bir stil eklemek. Mesajın tamamını görüntülemek için düğme 230 piksel genişliğinde olmalıdır.

# button1: üzerine gelin (genişlik: 230 piksel;)

Kolay renk tonu değişimi

Çok basit ve popüler CSS efekti düğme için. Fare imlecini üzerine getirdiğinizde, arka plan rengi tonu düzgün bir şekilde değişir.

Temel CSS kodu

CSS kodu önceki örneğe çok benzer. Farklı bir arka plan rengi kullandı ve şekli biraz değiştirdi. Ayrıca metni ortalar ve düğmenin dikey olarak ortalanması için satır yüksekliğini ayarlar.

# button2 (arka plan: # d11717; kenarlık: 2 piksel düz #eee; yükseklik: 38 piksel; genişlik: 125 piksel; kenar boşluğu: 50 piksel 0 0 50 piksel; taşma: gizli; ekran: blok; metin hizalama: merkez; satır yüksekliği: 38 piksel; )

CSS3 Efektleri

Yuvarlanacak köşeleri, arka plan için bir degrade ve ek bir gölge ayarlayın. Gölgeyi siyah ve şeffaf yapmak için rgba kullanın.

/ * Yuvarlatılmış köşeler * / -webkit-border-radius: 10px; -moz-border-radius: 10px; sınır yarıçapı: 10 piksel; / * Gradient * / background-image: -webkit-linear-gradient (üst, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); arka plan görüntüsü: -moz-doğrusal-gradyan (üst, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); arka plan görüntüsü: -o-doğrusal-gradyan (üst, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); arka plan görüntüsü: -ms-doğrusal-gradyan (üst, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); arka plan görüntüsü: doğrusal gradyan (üst, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); / * Gölge * / -webkit-box-shadow: 0px 3px 1px rgba (0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba (0, 0, 0, 0.2); kutu gölgesi: 0px 3px 1px rgba (0, 0, 0, 0.2);

CSS animasyonu

Animasyon önceki örnektekiyle hemen hemen aynıdır.

/ * Geçiş * / -webkit-geçiş: Tüm 0,5 saniyelik kolaylık; -moz-geçiş: Tüm 0,5 saniyelik kolaylık; -o-geçiş: Tüm 0,5 saniyelik kolaylık; -ms-geçiş: Tüm 0,5 saniyelik kolaylık; geçiş: Tüm 0,5 saniyelik kolaylık;

fareyle üzerine gelme

Fareyi gezdirmek farklı bir arka plan rengi ayarlayacaktır. Harika bir efekt için Photoshop'ta daha açık bir renk seçeneği seçmeyi deneyin.

# button2: üzerine gelin (arka plan rengi: # ff3434;)

Bu efekt, arka plan görüntüsünün seçimine bağlı olarak oldukça etkileyici olabilir. Demo düz bir arka plan kullanır ve efekt düz görünür. Farklı bir resim kullanmayı deneyin ve çarpıcı bir etkisi olabilir.

Temel CSS kodu

Kodun büyük kısmı önceki örneklerdekiyle aynıdır. Lütfen kullandığımızı unutmayın arka plan görüntüsü. İlk pozisyon arka plan "0 0" olarak ayarlanmıştır. İmleci gezdirmek konumu dikey olarak hareket ettirir.

# button3 (arka plan: # d11717 url ("bkg-1.jpg"); arka plan konumu: 0 0; metin gölgesi: 0px 2px 0px rgba (0, 0, 0, 0.3); yazı tipi boyutu: 22px; yükseklik : 58 piksel; genişlik: 155 piksel; kenar boşluğu: 50 piksel 0 0 50 piksel; taşma: gizli; ekran: blok; metin hizalama: merkez; satır yüksekliği: 58 piksel;)

CSS3 Efektleri

V bu örneközel bir şey yok - yuvarlatılmış köşeler ve gölgeler.

/ * Yuvarlatılmış köşeler * / -webkit-border-radius: 5px; -moz-border-radius: 5px; sınır yarıçapı: 5 piksel; / * Gölge * / -webkit-box-shadow: 0px 3px 1px rgba (0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba (0, 0, 0, 0.2); kutu gölgesi: 0px 3px 1px rgba (0, 0, 0, 0.2);

CSS animasyonu

Bu durum için animasyonun düzgün ve ilginç bir efekt oluşturması daha uzun sürer.

/ * Geçiş * / -webkit-geçiş: Tüm 0.8s kolaylığı; -moz-geçiş: Tüm 0.8s kolaylığı; -o-geçiş: Tüm 0.8s kolaylığı; -ms-geçiş: Tüm 0.8s kolaylığı; geçiş: Tüm 0.8s kolaylığı;

fareyle üzerine gelme

Şimdi arka plan resmini değiştirme zamanı. Başlangıç ​​pozisyonu "0 0" idi. İkinci parametreyi 150 piksele ayarlayın. Yatay olarak kaydırmak için ilk parametreyi değiştirmeniz gerekir.

# button3: üzerine gelin (arka plan konumu: 0px 150px;)

Bir düğmeye basmanın 3D simülasyonu

Eğitimimizdeki son örnek, popüler yöntem Fare imleci üzerine geldiğinde bir düğmeye basmanın 3D simülasyonu. Bu durum için animasyon o kadar basittir ki, bir CSS geçişi tanımlamanıza bile gerek yoktur. Ama sonuç oldukça etkileyici.

Temel CSS kodu

Düğmemiz için CSS.

# button4 (arka plan: # 5c5c5c; metin gölgesi: 0px 2px 0px rgba (0, 0, 0, 0.3); yazı tipi boyutu: 22px; yükseklik: 58px; genişlik: 155px; kenar boşluğu: 50px 0 0 50px; taşma: gizli ; görüntüleme: blok; metin hizalama: merkez; satır yüksekliği: 58 piksel;)

CSS3 Efektleri

V bu durum CSS3 artık hoş bir seçenek değil. Efekt, gölgeler ve bir degrade gerektirir. Sert bir gölge, 3B düğme görünümünü oluşturur.

/ * Yuvarlatılmış köşeler * / -webkit-border-radius: 5px; -moz-border-radius: 5px; sınır yarıçapı: 5 piksel; / * Gölge * / -webkit-box-shadow: 0px 6px 0px rgba (0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba (0, 0, 0, 0.8); kutu gölgesi: 0px 6px 0px rgba (0, 0, 0, 0.8); / * Gradient * / background-image: -webkit-linear-gradient (üst, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); arka plan görüntüsü: -moz-doğrusal-gradyan (üst, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); arka plan görüntüsü: -o-doğrusal-gradyan (üst, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); arka plan görüntüsü: -ms-doğrusal-gradyan (üst, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); arka plan görüntüsü: doğrusal gradyan (üst, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2));

fareyle üzerine gelme

Bu durumda, en büyük vurgulu bölüme sahibiz. Gölgenin uzunluğu azaltılır ve kenar boşlukları koyu alanı karıştırmak için kullanılır. Hep birlikte bir düğmeye basma yanılsamasını yaratır. Gradyanı tersine çevirmek efekti artırır.

# button4: vurgulu (kenar boşluğu: 52px; / * Shadow * / -webkit-box-shadow: 0px 4px 0px rgba (0, 0, 0, 0.8); -moz-box-shadow: 0px 4px 0px rgba (0 , 0, 0, 0.8); kutu gölgesi: 0px 4px 0px rgba (0, 0, 0, 0.8); / * Gradyan * / arka plan resmi: -webkit-doğrusal-gradyan (alt, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.4)); arka plan görüntüsü: -moz-doğrusal-gradyan (alt, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.4) )); arka plan görüntüsü: -o-doğrusal-gradyan (alt, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.4)); arka plan görüntüsü: -ms-doğrusal-gradyan ( alt, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.4)); arka plan görüntüsü: doğrusal gradyan (alt, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.4));)

• Tercüme

Merhaba sevgili habradrug! Bugün 3D CSS3 düğmelerinin nasıl oluşturulacağını öğreneceğiz! Orman Clark'ın Premium Pixels web sitesi için popüler PSD Freebee'sine dayanıyorlar. Mümkün olduğunca az HTML ile CSS kullanarak bu düğmelerin bir kopyasını oluşturmaya çalışacağız.

Aşama 1: Bir HTML belgesi oluşturun

Yeni bir tane oluşturarak başlayacağız HTML belgesi... Bize harika bir başlangıç ​​noktası sağlamak için HTML5 standart kalıbını temel alacaktır. Şimdi bağlantıları olan bir liste ekleyeceğiz. Temelde hepsi bu, CSS3 sayesinde ek div'ler ve yayılma alanları kullanmak zorunda kalmadığınız için.
Listedeki her öğeye bir 'buttons' sınıfı atayacağız. Ve Orman farklı renkler kullandığı için sınıf olarak her butona kendi rengini atayacağız.

• İndirmek
• İndirmek
• İndirmek
• İndirmek
• İndirmek
• İndirmek
• İndirmek
• İndirmek
• İndirmek
• İndirmek

Bu aşamada ihtiyacımız olan tek şey bu.

Adım 2: Ana CSS kuralları

Eğimler, yuvarlatılmış köşeler vb. ile uğraşmadan önce temel kurallara dikkat etmeniz gerekir. Süslü değil, sade CSS2:

Ul (liste stili: yok;) a.button (ekran: blok; kayan nokta: sol; konum: göreceli; yükseklik: 25 piksel; genişlik: 80 piksel; kenar boşluğu: 0 10 piksel 18 piksel 0; metin dekorasyonu: yok; yazı tipi: 12 piksel " Helvetica Neue ", Helvetica, Arial, sans-serif; yazı tipi ağırlığı: kalın; satır yüksekliği: 25 piksel; metin hizalama: merkez;)
Şimdi farklı renkler için kuralları uygulayalım. Örneğin, gri için. Diğer tüm renkler demoda görüntülenebilir.
/ * GRİ * / .gray, .gray: vurgulu (renk: # 555; kenarlık-alt: 4 piksel düz # b2b1b1; arka plan: #eee; .gray: vurgulu (arka plan: # e2e2e2;))
Böyle bir şeyle bitirmelisin. 2008 ise oldukça sağlam görünüyor.

Aşama 3:Çift kare!

Sonuca yakından bakarsanız, tüm düğmenin çevresinde ince bir çizgi olduğunu göreceksiniz. Bu etkiyi elde etmek için sözde öğeleri kullanacağız. : önce ve : sonrasında.
a.button (ekran: blok; kayan nokta: sol; konum: göreli; yükseklik: 25 piksel; genişlik: 80 piksel; kenar boşluğu: 0 10 piksel 18 piksel 0; metin dekorasyonu: yok; yazı tipi: 12 piksel "Helvetica Neue", Helvetica, Arial, sans -serif; yazı tipi ağırlığı: kalın; satır yüksekliği: 25 piksel; metin hizalama: merkez;) a.button: önce, a.button: sonra (içerik: ""; konum: mutlak; sol: -1 piksel; yükseklik: 25 piksel; genişlik: 80 piksel; alt: -1 piksel;) a.button: önce (yükseklik: 23 piksel; alt: -4 piksel; kenarlık-üst: 0;)
Renk eklerken düğmeler çok daha iyi görünüyor.
/ * GRİ * / .gray, .gray: vurgulu (renk: # 555; kenarlık-alt: 4 piksel düz # b2b1b1; arka plan: #eee;) .gray: önce, .gri: sonra (kenarlık: 1 piksel düz #cbcbcb; border-bottom: 1px katı # a5a5a5;) .gray: üzerine gelin (arka plan: # e2e2e2;)

4. Adım: Biraz CSS3 büyüsü

Şimdi asıl CSS3 kısmına geçelim. Yuvarlatılmış köşelerle başlayalım:
a.button (ekran: blok; kayan nokta: sol; konum: göreli; yükseklik: 25 piksel; genişlik: 80 piksel; kenar boşluğu: 0 10 piksel 18 piksel 0; metin dekorasyonu: yok; yazı tipi: 12 piksel "Helvetica Neue", Helvetica, Arial, sans -serif; yazı tipi ağırlığı: kalın; satır yüksekliği: 25 piksel; metin hizalama: merkez; -webkit-border-yarıçapı: 3 piksel; -moz-border-yarıçapı: 3 piksel; sınır yarıçapı: 3 piksel;)
Doğal olarak elementler : önce ve : sonrasında Ayrıca gerek yuvarlatılmış köşeler.
a.button: önce, a.button: after (içerik: ""; konum: mutlak; sol: -1 piksel; yükseklik: 25 piksel; genişlik: 80 piksel; alt: -1 piksel; -webkit-border-yarıçapı: 3 piksel; -moz -border-radius: 3px; border-radius: 3px;) a.button: önce (height: 23px; alt: -4px; border-top: 0; -webkit-border-radius: 0 0 3px 3px; -moz- sınır yarıçapı: 0 0 3px 3px; border-radius: 0 0 3px 3px; -webkit-box-shadow: 0 1px 1px 0px #bfbfbf; -moz-box-shadow: 0 1px 1px 0px #bfbfbf; kutu-gölge: 0 1px 1px 0px #bfbfbf;)
Son olarak, metin için degradeler, bir iç gölge ve bir gölge uygulayacağız. IE6'daki hataları önlemek için durum: ziyaret edildi.
/ * GRİ * / a.gray, a.gray: vurgulu, a.gray: ziyaret edildi (renk: # 555; kenarlık-alt: 4 piksel katı # b2b1b1; metin gölgesi: 0 piksel 1 piksel 0 piksel #fafafa; arka plan: #eee; arka plan: -webkit-gradient (doğrusal, sol üst, sol alt, (#eee), den (#e2e2e2)'ye); arka plan: -moz-doğrusal-gradyan (üstte, #eee, #e2e2e2); kutu gölgesi: 1px 1px 0 # f5f5f5; ) .gray: önce, .gray: after (kenarlık: 1 piksel düz #cbcbcb; kenarlık-alt: 1 piksel düz # a5a5a5;) .gray: vurgulu (arka plan: # e2e2e2; arka plan: -webkit-gradyan (doğrusal, sol üst, sol alt, (# e2e2e2) ile (#eee) arası); arka plan: -moz-doğrusal-gradyan (üst, # e2e2e2, #eee);)
Sonucumuz o kadar da kötü değil!

Adım 5: Bir şey unuttuk mu?

Orman, tasarımında aktif bir duruma da yer veriyor. Bu nedenle, sadece kodumuza eklememiz gerekiyor.
Kodun bu kısmını farklı renkler için kurallara göre yerleştireceğiz.
/ * AKTİF DURUM * / a.button: aktif (border: yok; alt: -4px; margin-bottom: 22px; -webkit-box-shadow: 0 1px 1px #fff; -moz-box-shadow: 0 1px 1px #fff; kutu gölgesi: 1px 1px 0 #fff, iç metin 0 1px 1px rgba (0, 0, 0, 0.3);) a.button: active: önce, a.button: active: after (kenarlık: yok; - webkit-box-shadow: yok; -moz-box-shadow: yok; kutu-gölge: yok;)
İşte aldığımız şey:

6. Adım (isteğe bağlı): Eski tarayıcılar

Bu yüzden her yerde çalışan güzel CSS3 düğmeleri yarattık. modern tarayıcılar... Ama ne hakkında Internet Explorer 8 ve altı. Bu tarayıcılarda metin gölgeleri veya gradyanlar için destek yoktur.
Bu sorunu çözmek için kullanabiliriz javascript kitaplığı Tarayıcınızın CSS3 ve HTML5'i destekleyip desteklemediğini belirleyebilen Modernizr. Kütüphane sorunu çözmez, yalnızca alternatif bir stil sunar.
İlk olarak, çok fazla javascript taşımak zorunda kalmamak için kendi Modernizr sürümümüzü oluşturacağız. Bunu kendi web sitesinde yapabilirsiniz. Javascript'i belgemize ekledikten sonra kuralları tanımlamamız gerekiyor. farklı sınıflar için alternatif tarz... Kenarlık yarıçapını ve gradyanları desteklemeyen tarayıcılar için resimler kullanacağız.
/ * MODERNIZR FALLBACK * / .no-cssgradients a.button, .no-cssgradients a.button: ziyaret edildi, .no-borderradius a.button, .no-borderradius a.button: ziyaret edildi, .no-oluşturulmuş içerik a.button, .no-generatedcontent a.button: ziyaret edildi (arka plan: url (images / sprite.png) tekrarsız 0 0px; yükseklik: 32px; genişlik: 82px;) .no-cssgradients a.button: üzerine gelin, .no-borderradius a .button: hover, .no-generatedcontent a.button: hover (arka plan: url (images / sprite.png) tekrarsız 0 -32px;) .no-cssgradients a.button: aktif, .no-borderradius a.button : aktif, .no-generatedcontent a.button: aktif (arka plan: url (images / sprite.png) tekrarsız 0 -64px; alt: 0; satır yüksekliği: 35px;) .no-cssgradients a.gray,. no-cssgradients a.gray: ziyaret edildi, .no-cssgradients a.gray: üzerine gelin (background-position-x: 0;) .no-cssgradients a.pink, .no-cssgradients a.pink:ziyaret edilen, .no-cssgradients a.pink:hover (background-position-x: -82px;) .no-cssgradients a.blue, .no-cssgradients a.blue:visited, .no-cssgradients a.blue:hover (arka plan d-konumu-x: -164 piksel; ) .no-cssgradients a.green, .no-cssgradients a.green:ziyaret edildi, .no-cssgradients a.green:hover (background-position-x: -246px;) .no-cssgradients a.turkuaz, .no- cssgradients a.turquoise: ziyaret edildi, .no-cssgradients a.turkuaz: üzerine gelin (background-position-x: -328px;) .no-cssgradients a.black, .no-cssgradients a.black:ziyaret edildi, .no-cssgradients a .black: vurgulu (background-position-x: -410px;) .no-cssgradients a.darkgray, .no-cssgradients a.darkgray: ziyaret edildi, .no-cssgradients a.darkgray: hover (background-position-x: - 492px;) .no-cssgradients a.yellow, .no-cssgradients a.yellow: ziyaret edildi, .no-cssgradients a.yellow: üzerine gelin (background-position-x: -574px;) .no-cssgradients a.purple,. no-cssgradients a.purple: ziyaret edildi, .no-cssgradients a.purple: vurgulu (background-position-x: -656px;) .no-cssgradients a.darkblue, .no-cssgradients a.darkblue: ziyaret edildi, .no- cssgradients a.darkblue: vurgulu (background-position-x: -738px;) .no-cssgradients a.button, .no-cssgradients a.button: ziyaret edildi, .no-cssgradients a .button: üzerine gelin, .no-cssgradients a.button: önce, .no-cssgradients a.button: after, .no-borderradius a.button, .no-borderradius a.button: ziyaret edildi, .no-borderradius a.button : üzerine gelin, .no-borderradius a.button: önce, .no-borderradius a.button: after, .no-generatedcontent a.button, .no-generatedcontent a.button: ziyaret edildi, .no-generatedcontent a.button: üzerine gelin , .no-generatedcontent a.button: önce, .no-generatedcontent a.button: after (sınır: 0; )

Çözüm

Bu bize güzel CSS3 çapraz tarayıcı düğmeleri bırakır. Burada 10 düğme için çok fazla kod olduğunu düşünebilirsiniz, ancak bu sadece CSS3'ün ne yapıp ne yapamayacağının bir gösterimidir. Bununla ne istersen yapabilirsin! Umarım öğreticim yardımcı olmuştur, okuduğunuz için teşekkürler!

Düğmelerle uğraşmadan önce, hepsinde ortak olan ayarlara bakalım.

HTML

Düğmeler için çok basit HTML kodu kullanılacaktır:

Abone olmak

CSS

Ayrıca, tüm düğmeler, etiket metni ve bağlantıların seçimini kaldırmak için ortak ayarlara sahip olacaktır:

ButtonText (font: 18px / 1.5 Helvetica, Arial, sans-serif; renk: #fff;) a (renk: #fff; metin-dekorasyon: yok;)

Tipik olarak, kullanıcı bir bağlantı veya düğmenin üzerine geldiğinde oldukça hafif bir etki bekler. Bizim durumumuzda, düğme boyutu değişir - ek bir mesaj göstererek büyür.

Temel CSS kodu

Başlamak için, butona sadece bir şekil ve renk vermemiz gerekiyor. Yüksekliği 28 piksele ve genişliği 115 piksele ayarlayın, kenar boşlukları ve dolgu ekleyin ve düğmeye hafif bir kenarlık verin.

# button1 (arka plan: # 6292c2; kenarlık: 2 piksel düz #eee; yükseklik: 28 piksel; genişlik: 115 piksel; kenar boşluğu: 50 piksel 0 0 50 piksel; dolgu: 0 0 0 7 piksel; taşma: gizli; ekran: blok;)

CSS3 Efektleri

Bazı insanlar, basit bir butona çok sayıda CSS eşlik ettiğinde bundan hoşlanır. Bu bölüm, düğmemiz için ek CSS3 stilleri sağlar. Onlarsız yapabilirsiniz, ancak düğmeye daha modern bir görünüm verirler.

Çerçevenin köşelerini yuvarlayın ve bir degrade ekleyin. İşte herhangi bir arka plan rengiyle çalışan küçük bir karanlık gradyan numarası.

/ * Yuvarlatılmış köşeler * / -webkit-border-radius: 15px; -moz-border-radius: 15 piksel; sınır yarıçapı: 15 piksel; / * Gradient * / background-image: -webkit-linear-gradient (üst, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); arka plan görüntüsü: -moz-doğrusal-gradyan (üst, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); arka plan görüntüsü: -o-doğrusal-gradyan (üst, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); arka plan görüntüsü: -ms-doğrusal-gradyan (üst, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); arka plan görüntüsü: doğrusal gradyan (üst, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2));

CSS animasyonu

Şimdi CSS geçişini ayarlayalım. Animasyon, herhangi bir özellik değişikliği için kullanılacak ve yarım saniye sürecektir.

fareyle üzerine gelme

Geriye kalan tek şey, üzerine geldiğinizde düğmeyi genişletmek için bir stil eklemek. Mesajın tamamını görüntülemek için düğme 230 piksel genişliğinde olmalıdır.

# button1: üzerine gelin (genişlik: 230 piksel;)

Kolay renk tonu değişimi

Bir düğme için çok basit ve popüler bir CSS efekti. Fare imlecini üzerine getirdiğinizde, arka plan rengi tonu düzgün bir şekilde değişir.

Temel CSS kodu

CSS kodu önceki örneğe çok benzer. Farklı bir arka plan rengi kullandı ve şekli biraz değiştirdi. Ayrıca metni ortalar ve düğmenin dikey olarak ortalanması için satır yüksekliğini ayarlar.

# button2 (arka plan: # d11717; kenarlık: 2 piksel düz #eee; yükseklik: 38 piksel; genişlik: 125 piksel; kenar boşluğu: 50 piksel 0 0 50 piksel; taşma: gizli; ekran: blok; metin hizalama: merkez; satır yüksekliği: 38 piksel; )

CSS3 Efektleri

Yuvarlanacak köşeleri, arka plan için bir degrade ve ek bir gölge ayarlayın. Gölgeyi siyah ve şeffaf yapmak için rgba kullanın.

/ * Yuvarlatılmış köşeler * / -webkit-border-radius: 10px; -moz-border-radius: 10px; sınır yarıçapı: 10 piksel; / * Gradient * / background-image: -webkit-linear-gradient (üst, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); arka plan görüntüsü: -moz-doğrusal-gradyan (üst, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); arka plan görüntüsü: -o-doğrusal-gradyan (üst, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); arka plan görüntüsü: -ms-doğrusal-gradyan (üst, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); arka plan görüntüsü: doğrusal gradyan (üst, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); / * Gölge * / -webkit-box-shadow: 0px 3px 1px rgba (0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba (0, 0, 0, 0.2); kutu gölgesi: 0px 3px 1px rgba (0, 0, 0, 0.2);

CSS animasyonu

Animasyon önceki örnektekiyle hemen hemen aynıdır.

/ * Geçiş * / -webkit-geçiş: Tüm 0,5 saniyelik kolaylık; -moz-geçiş: Tüm 0,5 saniyelik kolaylık; -o-geçiş: Tüm 0,5 saniyelik kolaylık; -ms-geçiş: Tüm 0,5 saniyelik kolaylık; geçiş: Tüm 0,5 saniyelik kolaylık;

fareyle üzerine gelme

Fareyi gezdirmek farklı bir arka plan rengi ayarlayacaktır. Harika bir efekt için Photoshop'ta daha açık bir renk seçeneği seçmeyi deneyin.

# button2: üzerine gelin (arka plan rengi: # ff3434;)

Bu efekt, arka plan görüntüsünün seçimine bağlı olarak oldukça etkileyici olabilir. Demo düz bir arka plan kullanır ve efekt düz görünür. Farklı bir resim kullanmayı deneyin ve çarpıcı bir etkisi olabilir.

Temel CSS kodu

Kodun büyük kısmı önceki örneklerdekiyle aynıdır. Bir arka plan resmi kullandığımızı unutmayın. Arka planın başlangıç ​​konumu "0 0" olarak ayarlanmıştır. İmleci gezdirmek konumu dikey olarak hareket ettirir.

# button3 (arka plan: # d11717 url ("bkg-1.jpg"); arka plan konumu: 0 0; metin gölgesi: 0px 2px 0px rgba (0, 0, 0, 0.3); yazı tipi boyutu: 22px; yükseklik : 58 piksel; genişlik: 155 piksel; kenar boşluğu: 50 piksel 0 0 50 piksel; taşma: gizli; ekran: blok; metin hizalama: merkez; satır yüksekliği: 58 piksel;)

CSS3 Efektleri

Bu örnekte özel bir şey yok - yuvarlatılmış köşeler ve gölgeler.

/ * Yuvarlatılmış köşeler * / -webkit-border-radius: 5px; -moz-border-radius: 5px; sınır yarıçapı: 5 piksel; / * Gölge * / -webkit-box-shadow: 0px 3px 1px rgba (0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba (0, 0, 0, 0.2); kutu gölgesi: 0px 3px 1px rgba (0, 0, 0, 0.2);

CSS animasyonu

Bu durum için animasyonun düzgün ve ilginç bir efekt oluşturması daha uzun sürer.

/ * Geçiş * / -webkit-geçiş: Tüm 0.8s kolaylığı; -moz-geçiş: Tüm 0.8s kolaylığı; -o-geçiş: Tüm 0.8s kolaylığı; -ms-geçiş: Tüm 0.8s kolaylığı; geçiş: Tüm 0.8s kolaylığı;

fareyle üzerine gelme

Şimdi arka plan resmini değiştirme zamanı. Başlangıç ​​pozisyonu "0 0" idi. İkinci parametreyi 150 piksele ayarlayın. Yatay olarak kaydırmak için ilk parametreyi değiştirmeniz gerekir.

# button3: üzerine gelin (arka plan konumu: 0px 150px;)

Bir düğmeye basmanın 3D simülasyonu

Öğreticimizdeki son örnek, fare imleci üzerine geldiğinde bir düğmeye basmanın popüler 3D simülasyonuna ayrılmıştır. Bu durum için animasyon o kadar basittir ki, bir CSS geçişi tanımlamanıza bile gerek yoktur. Ama sonuç oldukça etkileyici.

Temel CSS kodu

Düğmemiz için CSS.

# button4 (arka plan: # 5c5c5c; metin gölgesi: 0px 2px 0px rgba (0, 0, 0, 0.3); yazı tipi boyutu: 22px; yükseklik: 58px; genişlik: 155px; kenar boşluğu: 50px 0 0 50px; taşma: gizli ; görüntüleme: blok; metin hizalama: merkez; satır yüksekliği: 58 piksel;)

CSS3 Efektleri

Bu durumda, CSS3 artık iyi bir seçenek değildir. Efekt, gölgeler ve bir degrade gerektirir. Sert bir gölge, 3B düğme görünümünü oluşturur.

/ * Yuvarlatılmış köşeler * / -webkit-border-radius: 5px; -moz-border-radius: 5px; sınır yarıçapı: 5 piksel; / * Gölge * / -webkit-box-shadow: 0px 6px 0px rgba (0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba (0, 0, 0, 0.8); kutu gölgesi: 0px 6px 0px rgba (0, 0, 0, 0.8); / * Gradient * / background-image: -webkit-linear-gradient (üst, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); arka plan görüntüsü: -moz-doğrusal-gradyan (üst, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); arka plan görüntüsü: -o-doğrusal-gradyan (üst, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); arka plan görüntüsü: -ms-doğrusal-gradyan (üst, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); arka plan görüntüsü: doğrusal gradyan (üst, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2));

fareyle üzerine gelme

Bu durumda, en büyük vurgulu bölüme sahibiz. Gölgenin uzunluğu azaltılır ve kenar boşlukları koyu alanı karıştırmak için kullanılır. Hep birlikte bir düğmeye basma yanılsamasını yaratır. Gradyanı tersine çevirmek efekti artırır.

# button4: vurgulu (kenar boşluğu: 52px; / * Shadow * / -webkit-box-shadow: 0px 4px 0px rgba (0, 0, 0, 0.8); -moz-box-shadow: 0px 4px 0px rgba (0 , 0, 0, 0.8); kutu gölgesi: 0px 4px 0px rgba (0, 0, 0, 0.8); / * Gradyan * / arka plan resmi: -webkit-doğrusal-gradyan (alt, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.4)); arka plan görüntüsü: -moz-doğrusal-gradyan (alt, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.4) )); arka plan görüntüsü: -o-doğrusal-gradyan (alt, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.4)); arka plan görüntüsü: -ms-doğrusal-gradyan ( alt, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.4)); arka plan görüntüsü: doğrusal gradyan (alt, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.4));)

Bugün sizlere şık düğmeler nasıl yapılır onu anlatmak istiyorum. saf CSS... 4 stil yapacağız, bunlar tek renkle doldurulmuş düğmeler, kenarlıkla çevrili düğmeler, gölgeli ve dolgulu düğmeler için bir stil ve son 4 stil, tıklama efektli düğmelerdir. Tüm bu güzellikleri hiçbir script kullanmadan, sadece CSS ile yapacağız.

Demo Ι

Düğmeler için HTML kodu

Kullanacağımız HTML kodu çok basit. Her buton için ayrı sınıflar tanımlayacağız. Ayrıca, fareyle üzerine gelme ve gelecekteki düğmemizi etkinleştirme üzerindeki efekti uygulamak için sınıflar belirleyeceğiz. Genel olarak, işte kodun kendisi:

Buton : üzerine gelin : aktif Buton : üzerine gelin : aktif Buton : üzerine gelin : aktif Buton : üzerine gelin : aktif

Tüm düğmeler için CSS stilleri

Farklı tarayıcılar bazı standart kurallar CSS biraz farklı şekilde işlenir. Bu nedenle, aşağıdaki kod CSS'de tüm stilleri sıfırlayacağız ve bazı varsayılanlar ekleyeceğiz. Kodun görünümü şu şekildedir:

Düğme (ekran: satır içi blok; kenar boşluğu: 0 10px 0 0; dolgu: 15px 45px; yazı tipi boyutu: 48px; yazı tipi ailesi: "Bitter", serif; satır yüksekliği: 1.8; görünüm: yok; kutu gölgesi: yok; sınır yarıçapı: 0;) düğmesi: odak (anahat: yok)

Hiç de zor değil. Şimdilik 4 Şık Düğme Stilimizin her birine daha yakından bakalım.

Arka plan ile sular altında düz düğmeler

Bu tip butonlar, her şeye cevap verdiği için günümüzde çok popülerdir. modern trendler web tasarımı. Başka bir deyişle, düz stil veya Düz tasarım... Üstelik insanlar bu tür butonlara alışıktır ve isteyerek tıklarlar.

Bu görüntü, bir düğmenin normal (varsayılan), üzerine gelme ve tıklama veya eylem olmak üzere üç durumunu gösterir:

Bu düğmeler için CSS çok basittir. Bana öyle geliyor ki bu çok büyük bir artı:

Bölüm.flat düğmesi (renk: #fff; arka plan rengi: # 6496c8; metin gölgesi: -1px 1px # 417cb8; kenarlık: yok;) bölüm.düz düğmesi: vurgulu, bölüm.flat düğmesi.hover (arka plan rengi: # 346392; metin gölgesi: -1 piksel 1 piksel # 27496d;) bölüm.düz düğmesi: etkin, bölüm.düz düğme.aktif (arka plan rengi: # 27496d; metin gölgesi: -1 piksel 1 piksel # 193047;)

Kenarlıklı veya kenarlıklı stil düğmeleri

Bu buton tarzı düz butonlarla aynı sınıftadır.Tek farkı burada dolguyu kaldırmamız ve onun yerine butonların kenarlıklarını göstermek için kurallar koymamızdır. Bu görüntü her şeyi açıkça gösteriyor:

Ve her zamanki gibi CSS çok basittir, biz sadece kenarlığın görünmesi için kuralları ekliyoruz:

Bölüm.border düğmesi (renk: # 6496c8; arka plan: rgba (0,0,0,0); kenarlık: düz 5px # 6496c8;) bölüm.border düğmesi: vurgulu, bölüm.border düğmesi.hover (kenarlık rengi: # 346392; renk: # 346392;) bölüm.sınır düğmesi: etkin, bölüm.sınır düğmesi.aktif (kenarlık rengi: # 27496d; renk: # 27496d;)

CSS Gradyan Düğmeleri

Bu düğme stili güvenli bir şekilde modası geçmiş olarak adlandırılabilir, ancak şimdi bile İnternette bulunabilir. Bu düğmeler sitenizin stiline uyuyorsa, tam size göre. Onlar da çok basit bir şekilde yapılabilir, işte görüntü:

CSS'de gölge ve gradyan dolgu kurallarını kullanacağız. Fareyle üzerine gelindiğinde, düğmenin etrafında ve içeriye basıldığında bir gölge görünecektir.

Section.gradient düğmesi (renk: #fff; metin gölgesi: -2px 2px # 346392; arka plan rengi: # ff9664; arka plan görüntüsü: doğrusal gradyan (üst, # 6496c8, # 346392); kutu gölgesi: ek 0 0 0 1px # 27496d; border: yok; border-radius: 15px;) section.gradient düğmesi: vurgulu, bölüm.gradient düğmesi.hover (kutu-gölge: iç metin 0 0 0 1px # 27496d, 0 5px 15px # 193047;) bölüm.gradient düğmesi: etkin, bölüm.gradient düğmesi.aktif (kutu gölgesi: iç metin 0 0 0 1px # 27496d, iç metin 0 5px 30px # 193047;)

Şık presleme efekti

Bu tarz da artık çok popüler ve web sitesi tasarımında yaygın olarak kullanılıyor. Kullanıcıya, düğmeye gerçekten basılmış gibi görünüyor. İşte resimde ayrıntılı olarak görebilirsiniz:

CSS burada biraz daha karmaşıktır ve biraz matematik gerektirir. Ancak bu bile kolayca anlaşılabilir. Genel olarak, her şey çok korkutucu değil. Düğmenin altına bulanık olmayan bir gölge yerleştireceğiz, böylece 3B düğme efekti verir veya biraz şişkin görünür. Düğmelerin üzerine gelindiğinde arka planı daha koyu hale getireceğiz. Ve kullanıcı butona tıkladığında, butonun kendisinin stillerdeki konumunu değiştireceğiz. Ve her şeyin daha etkili ve pürüzsüz görünmesini sağlamak için bir CSS3 dönüşümü ekleyeceğiz (translateY). Böylece, düğme sorunsuz bir şekilde aşağı kayar. Ve işte CSS kodunun kendisi:

Bölüm.basma düğmesi (renk: #fff; arka plan rengi: # 6496c8; kenarlık: yok; kenarlık yarıçapı: 15 piksel; kutu gölgesi: 0 10 piksel # 27496d;) bölüm.basma düğmesi: üzerine gelin, bölüm.düğmeye basın.hover (arka plan rengi: # 417cb8) bölüm.basın düğmesi: etkin, bölüm.düğmeye basın.aktif (arka plan rengi: # 417cb8; kutu gölgesi: 0 5 piksel # 27496d; dönüştürme: çeviriY (5 piksel);)

Demo Ι

Çözüm

Bu kadar! Artık ihtiyaçlarınıza göre kullanabileceğiniz şık ve modern düğmelere sahipsiniz. Doğal olarak, onları tanınmaz hale gelene kadar değiştirebilirsiniz, çünkü bu, bu tür düğmelerin uygulanmasının yalnızca en basit örneğidir. Umarım bu eğitimden keyif almışsınızdır. Yakında görüşürüz!