CSS modern tasarımdaki düğmeler. Modern CSS düğmelerinin temellerine giriş

Bence web projelerinde kullanılabilecek bazı CSS düğmeleri seçtim.

CSS3 Düğmeleri Jeneratörü

Jeneratöre bak Sanwebe'den CSS3 düğmeleri:

Pacifico Yazı Tipi ile Pembe CSS3 Düğmesi

Sevimli pembe düğme ( müzik çalmak ve dahili metni değiştirmek için küçük bir jQuery kodu dışında) CSS3'e göre tamamen oluşturuldu:

3D düğmelerinin toplanması

CSS3 kullanılarak oluşturulan 3B düğmeler koleksiyonu:

Sosyal 3D Düğmeleri

Mükemmel sosyal düğmelerCSS3 ve yazı tipi ile simgeler için tamamlandı:

Animasyonlu CSS3 Düğmeleri

Arka plan desenleri ile animasyonlu CSS düğmeleri. Firefox 3.6 ve IE10 tarayıcılarında çalışmayabilir:

Yuvarlak animasyonlu CSS3 düğmeleri

Fareyi gezdirirken metnin dönüşü olan başka bir animasyonlu düğme, gerçekten çekici bir etki verir:

Temiz Daire Düğmeleri

İşte dairesel CSS3 düğmelerinin bir başka örneği:

CSS3 düğmelerini değiştirir

CSS3 ve Yazı Tipi Simgeleri Kullanarak Oluşturulan Aferin Anahtarlar:

Animasyonlu CSS3 düğmesi

CSS3 ve Google yazı tipleri kullanılarak oluşturulan sevimli üç boyutlu düğme:

CSS3 düğmelerinin etkileri

Bu düğmeler, CSS3'ün çeşitli özelliklerini kullanarak animasyonları göstermektedir:

Parlak CSS3 Düğmeleri

Artık parlak düğmelerin CSS3 kullanarak kolayca oluşturulabileceğinden, daha fazla Photoshop:

Üç boyutlu CSS3 düğmeleri

Pseudo-elements CSS3'ün yardımıyla yapabileceğiniz şaşırtıcıdır: önce ve: daha sonra. Çarpıcı üç boyutlu düğmeleri değerlendirin:

Css3 anahtarı

JavaScript kullanmadan CSS3'teki bir anahtar düğmesine bir örnek:

Üç boyutlu bir rulo düğmesinin etkisi

CSS3 tarafından oluşturulduğunda düğmeye basıldığında üç boyutlu dönüşün etkisi:

Marka düğmeleri

Bootstrap simgeleri kullanarak popüler markaların güzel CSS düğmeleri:

Karanlık yuvarlak düğme

Düğmeye basarken bir damla efekti vermek için jquery kullanarak yuvarlak düğmesi:

Css3 anahtarı

CSS3 kullanılarak oluşturulan anahtarı:

Güzel düz düğmeler

Tüm durumlar için düz CSS düğmelerinin koleksiyonu, animasyon ve efektler olmadan:

Sosyal Ağ Erişim Düğmeleri

Düğmelerin daha çekici versiyonu genel erişimAncak işlevsel olmadan. Geliştiriciye göre, IE7 +'da çalışmalısınız:

Noel düğmesi

Noel CSS Düğmesi Veri Kullanımı: URL'ler - Görüntüleri doğrudan belgeye gömme yöntemi:

Yumuşak düğme

CSS3 ile oluşturulan yuvarlak parlak düğme:

Yumuşak Düğme Yumuşak Düğmesi

Düğmeler sadece metin veya çıkışları kullanmanızı sağlayan tek kodlu kodları kullanır:

Büyük üç boyutlu animasyonlu CSS3 düğmeleri

Siteler için üç boyutlu animasyonlu CSS düğmelerinden başka bir dizi. Animasyon animasyon ve anahtarlık özellikleri kullanılarak yapılır:

Metal CSS3 Düğmeleri

Metal CSS3 düğmeleri koleksiyonu, @ font-face kullanarak PictOS yazı tipi kullanılarak oluşturulan karakterler oluşturulur. Metal etkisi için, kutu gölgesinin ve doğrusal gradyanın özellikleri dahil edildi:

Yuvarlak CSS3 Düğmeleri

CSS3'te yuvarlak animasyonlu düğme koleksiyonu:

CSS3 Basınlı Sosyal Ağ Düğmeleri

Düğmeler, gradyanlar, kutu gölgeleri, metin gölgeleri vb. Gibi basit CSS3 özelliklerini kullanın. "Bekleyen" ve "aktif" statüsü de bu sette dahil edilir:

Basit CSS3 düğmeleri

Güzel CSS düğmeleri:

Üç boyutlu indirme düğmesi

Bu üç boyutlu düğme perspektif dönüşümünü kullanır. Sadece WebKit tabanlı tarayıcılarda çalışır:

CSS3 Sosyal Ağ Düğmeleri Straceing

Büyük düğme

Altta gölge efekti ile katı parlak CSS3 düğmesi. Düğme, google koleksiyonundan Sansita One adlı bir yazı tipi kullanır:

Basit düğmeler

Biraz basit CSS. Düğmeler:

CSS3-Düğme Sosyal Ağlar

Basit CSS Düğmeleri

Komplike olmayan CSS düğmeleri kümesi. Yapılandırmak ve kullanmak kolaydır. Font-müthiş veya diğer kütüphanelerle kolayca entegre edilebilirler:

Bir poker çip formundaki düğmeler

Bir poker oyunu formundaki basit bir düğme örneği. Ayrıca rehberlik efekti olan bir düğme olarak da kullanılabilir:

Kaydırıcı düğmesi

Kavram CSS kaydırıcı düğmeleri:

Yönetici menüsü düğmeleri

Yönetici Paneli ( menü veya Navigasyon) CSS3 ve fontawesome çerçevesini kullanarak. Düğmeye geçerken, aktif sınıf JQuery kullanarak eklenir:

Bir dikili düğme

Çizgi ile basit düğme, arka plan resmi kullanmadan CSS3 yetenekleri gösteren:

Döner düğmesi

Fare imleci rehberlik göstergesi için döner bir sınır ile yuvarlak düğme:

CSS3'teki düğme.

Bu örneğe göre CSS3 tarafından oluşturulan yumuşak düğme:

Genişletilmiş kartlı CSS3 düğmesi

Bu CSS düğmeleri, manşondan çıkan kartlar gibi görünüyor. Kullanıcı seçene kadar gizlenmesi gereken bilgileri görüntülemek için kullanılabilirler:

CSS3 Candy şeklinde animasyon düğmeleri

İndirme durumunu görüntülemek için Animasyon düğmesi:

CSS3 anahtarları

Sınıfı değiştirmek için jquery kullanan güzel anahtarlar:

Parlak düğmeler

CSS sitesi için güzel düğme kümesi. Üç boyutlu parlak tip vermek için çeşitli özellikler kullanılır:

İlk önce kaynakları indirmeniz ve düğmeler için ekran temasını seçin. Zevk alacağınız tasarımı alabilirsiniz. Örneğin, Winona'nın ilk konusunu alıyoruz.

İndirmek

Bu konuda ilgili makaleler:

Editördeki dosyayı açın index.html Kaynaktan, ilgi etiketini bize buluruz. Benim durumumda:

Bu koddan bir sınıfla bir dize alın buton..

Kodu, Etiket Arasındaki Proje Kodumuzla ilgili herhangi bir yere gerekli konuma yerleştirin. .
Düğme adı istediğiniz kişiye değişir. Benim durumumda, adını "aç" olarak değiştiririm

Kopyala ve Etiketler arasında ekle Projenizin dizin dosyasında.

Örnekten, uygun başlık tema adının ek sınıfı kullanılarak belirli bir düğmenin eklendiği görülebilir.

Bizim durumumuzda, bu sınıf button-Winona. Bu nedenle, Winona adına sahip stiller eklenecektir.

Çok uygun, çünkü Düğmelerin tasarımını değiştirmek istiyorsanız, yalnızca etiketdeki ek sınıfın adını değiştirmeniz gerekir. . Ve stiller zaten dosyada yazıldığından button.csss.!

Bu yazıda, düğme CSS oluşturmak için birkaç yoldan bahsederiz. Ancak, düz UI ve malzeme tasarımı arasındaki farkı anlamak, hangi bileşenin uygulanacağını bilmiyorsanız, anlam ifade etmiyor. CSS kullanarak düğme oluşturmanın temelleri hakkında hızlı bir şekilde olabilir.

Temeller CSS Düğmeleri

Birkaç "teknik olmayan" düğme standartları vardır:

1. Kullanılabilirlik - çok önemlidir. Engelli kullanıcılar ve eski tarayıcılar düğmelere kolay erişime sahip olmalıdır;
2. Basit metin - Basit ve kısa metin düğmelerine yazın. Kullanıcılar, düğmenin amacını hemen anlamalıdır ve bunları nerede yönetecektir.

İnternetteki hemen hemen tüm düğmeler, çerçevelerin ve gölgelerin renginde bir değişiklikle etkilerini kullanır. Bu, pseudoclass yardımı ile yapılabilir. İkisine odaklanacağız :: Hover ve: aktif. Pseudo-Class: Fare imlecini vurduğunuzda CSS davranışlarından Hover sorumludur. Kod: Kullanıcı fare düğmesine basıldığında aktif, fakat aynı zamanda gitmesine izin vermedi.

Pseudoklass yardımı ile tamamen değişebilir görünüm Düğmeler, ancak bu rahatsız edici bir yaklaşımdır. Yeni başlayanlar, düğmelerin temel stillerini düzenlemek için daha iyidir, neredeyse tamamen görünümünü korur. Bu öğenin uygulanmasında, üç ana husus seçebilirsiniz - renk, gölgeler ve geçiş süresi.

Renk

Çeşitli özellikleri kullanarak CSS düğmeleri rengini değiştirin: renk, arka plan-renk ve kenarlık. İlk önce düğmenin rengini nasıl seçeceğinizle ilgileneceksiniz:

1. Çiçek kombinasyonları - Birbirinizi tamamlayan renkleri kullanın. Colorhexa. - Kombine renkleri aramak için harika bir araç;
2. Paleti gözetimi - Eğer bir renk paleti arıyorsanız, gidin lolcolors..

Gölge

Kutu gölgesi ile gölgeyi nesnenin etrafına ekleyebilirsiniz. Bu fikir düz UI ve malzeme tasarımında uygulanır. Box-Shadow özelliği hakkında daha fazla bilgi okunabilir Mdn..

Pürüzsüz geçiş süresi

Mülkiyet geçiş süresi geçici bir çerçeve ekler CSS değişiklikleri . Pürüzsüz geçişsiz düğmelerin stilleri, pseudoclass stillerine anında değişir: kullanıcıyı korkutabilen vurgulu. Aşağıdaki örnekte, düğme stili sorunsuz bir şekilde değişir (0,5 s için): Açık: Hover:

Renk değişikliği (sınır yarıçapı: 5px; yazı tipi boyutu: 20px; dolgu: 14px 80px; imleç: işaretçi; renk: #fff; arka plan rengi: # 00a6ff; yazı tipi boyutu: 1.5rem; Yazı tipi yüzü: "Roboto" Yazı tipi ağırlık: 100; sınır: 1px katı #fff; kutu-gölge: 2px 2px 5px # afe9ff; geçiş süresi: 0.5s; -Webkit-geçiş süresi: 0.5s; -moz-geçiş süresi: 0.5 s; ) .color-değişim: Hover (Renk: # 006398; Sınır: 1px katı # 006398; kutu-gölge: 2px 2px 20px # afe9ff;)

Ve şöyle görünüyor:

Örneği Görüntüle

Pürüzsüz geçiş kompleksleri ve eski tarayıcıların kodu farklı şekillerde farklıdır. Bu nedenle, eski tarayıcılar için önek eklemeniz gerekir:

geçiş Süresi: 0.5s / * Normal giriş, tüm modern tarayıcılarda çalışır * / -WebKit-Geçiş Süresi: 0.5S; / * Safari, Chrome ve Android * / -MOZ-Geçiş Süresi'nin bazı sürümlerine yardımcı olur: 0.5s; / * Firefox için * /

Düğme stillerini sıfırla

Tarayıcıyı, CSS düğme stili için varsayılan değeri ayarlayarak yapmak için özel stilleri yükleyebilirsiniz:

düğme.

Bunu düğme öğelerinin sınıflarına uygulamak daha iyidir ve her bir düğme ayrı değil.

Üç Stil Düğmeleri

1 - basit siyah ve beyaz

Örneği Görüntüle

Bu tür düğmeler birçok farklı stille iyi birleştirilir. Bu etki, siyah beyazın kontrastına dayanmaktadır.

Siyah düğmenin kodunu beyaz bir arka plan ile düşünün. Düğmeyi başka bir renkte yeniden boyamak için düğmede değiştirin css stilleri Tüm beyaz ve siyah işaretler:

Suit_and_tie (Renk: Beyaz; Yazı Tipi Boyutu: 20px; Yazı Tipi Yüzü: Helvetica; Metin Dekorasyonu: Yok; Sınır: 2px Katı Beyaz; Sınır-Yarıçapı: 20px; Geçiş Süresi: .2S; -WebKit-Geçiş Süresi: .2S; -WebKit-Geçiş Süresi: .2S; -Moz-Geçiş Süresi: .2S; arka plan rengi: siyah; dolgu: 4px 30px;) .Suit_and_tie: Hover (Renk: Siyah; Arka Plan-Renk: Beyaz; Geçiş Süresi: .2S; -Webkit- Geçiş süresi: .2S; -moz-geçiş süresi: .2S;)

Yukarıdaki stillerde, yazı tipinin ve arka plan renginin özelliklerinin geçiş süresi ile değerlerini değiştirdiği görülmektedir. En sevdiğiniz markaların renklerini alabilir ve kendi düğmenizi oluşturabilirsiniz. Markaların renkleri bulunabilir Brandcolors..

2- Düğmeler Düz UI

Düz UI, HTML düğmesi CSS'de minimalizmaya odaklanır - daha fazla eylem, daha az hareket. Genellikle, projem şekil kazanmaya başladığında, siyah ve beyaz düğmelerin düz UI'ye dönerim. Düz UI düğmeleri minimalist bir görünüme sahiptir ve çoğu tasarım için uygundur.

3B etkisini taklit etmek için hareket ekleyerek düğmemizi geliştirin.

Örneği Görüntüle

İlk düğmeye bakacağız:

Turkuaz (Marj-Sağ: 10px; Genişlik: 100px; Arka Plan: # 1ABC9C; Sınır-Alt: # 16A085 3PX Katı; Sold-Sol: # 16A085 1PX Katı; Sınır-Sağ: # 16A085 1px Katı: Sınır-yarıçapı: 6px; Metin Hizası: Center; Renk: Beyaz; Dolgu: 10px; Şamandıra: Sol; Yazı Tipi Boyutu: 12PX; Yazı Tipi Ağırlığı: 800;) .Turquoise: Hover (Opaklık: 0.8;) .Turquoise: Aktif (Genişlik: 100PX; Arka plan: # 18B495; kenarlık alt: # 16A085 1px katı; Sınır solu: # 16A085 1px katı; kenarlık-sağ: # 16A085 1px katı; Sınır yarıçapı: 6px; Metin Hizası: Merkez; Renk: Beyaz; Dolgu: 10px; Marj -Top: 3PX;]] Şamandıra: Sol;)

Düğme CSS'nin üç durumu vardır: Normal ,: Hover ve: aktif.

: Hover, bir düğmeyi biraz daha hafifletmek için şeffaflıkta bir düşüşle yalnızca bir kod satırı içerir, bu nedenle daha parlak bir renk seçmeniz gerekmez.

Sağlam bir kenarlık çerçevesi belirlemek yerine, kenar tabanı, kenarlık-sol ve kenarlık-sağ özellikler burada bir 3D derinlik etkisi yaratır.

Pseudo-Class: Aktif, genellikle düz UI düğmelerinde kullanılır. Düğmemiz olduğunda: Aktif iki şey olur:

1. : Sınır alt 3px ila 1px arasında değişir. Düğmenin altındaki gölge azalır ve düğme bir çift piksel üzerine düşer. Bu değişiklik, kullanıcının düğmesine bastığını hissetmesini sağlar;
2. Arka plan rengi, düğmenin ofsetini kullanıcıdan ekrana taklit ederek kararır. Kullanıcıya bir düğmeye bastığını da hatırlatır.

Düz UI'de, düğmelerin minimalist hareketleri değerlidir " söylüyorum büyük hikaye " Birçoğu kullanarak düğmenin kaymasını simüle eder: kenarlık alt. Düz UI'da hiç hareket etmeyen düğmeler olduğuna, ancak rengini değiştirmenin farkına varmaya değer.

Malzeme tasarımı.

Malzeme tasarımı, dikkat çekmek için farklı animasyonlarla bilgi biçiminde bilgi iletme fikrini destekleyen tasarıma bir yaklaşımdır. Google sayfada listelenen Malzeme tasarımı ana sayfası. Üç temel ilke:

• "Malzeme" kelimesi bir metafordur;
• Monotonluk, grafik, saldırganlık;
• Hareket değerini iletir.

Bu ilkelerin üçünü daha iyi anlamak için, geçerli malzeme tasarımına bir göz atın:

Örneği Görüntüle

Bu CSS düğmeleri, kutu gölge ve polimer özelliği iki ana fikir uygular.

Polimer - Siteler oluşturmak için çerçeve. Bununla birlikte, eğim üzerindeki yayılım dalgasının etkisi, kodun sadece bir satırıyla eklenir:

Sunmak

/ * Bu dize efekti * / /

- Polimer bileşeni. Çerçeveyi HTML'nin başlangıcına bağlayarak, bileşenlerine erişiyoruz. Çerçevenin olanakları ile sitede daha ayrıntılı olarak tanışabilirsiniz. Polimer Projesi..

Şimdi, malzeme tasarım ilkelerini uygulayan CSS kodu hakkında konuşalım:

gövde (Arka Plan-Renk: # F9F9F9; Yazı Tipi Yüzü: Robotodraft, "Helvetica Neue";) / * Düğme * / .button (Ekran: Inline-blok; Konum: Göreceli; Genişlik: 120px; Yükseklik: 32PX; Hat Yüksekliği : 32PX; Sınır-yarıçapı: 2px; Yazı Tipi Boyutu: 0.9EM; Arka Plan-Renk: #FFF; Renk: # 646464; Marj: 20px 10px; Geçiş: 0.2S; Geçiş gecikmesi: 0.2s; kutu-gölge: 0 2px 5px 0 RGBA (0, 0, 0, 0.26);). BOYUN: Aktif (Kutu-Gölge: 0 8PX 17PX 0 RGBA (0, 0, 0, 0.2); Geçiş gecikmesi: 0S;) / * Misc * / .button.grey (arka plan rengi: #ee;) .button.blue (arka plan rengi: # 4285f4; renk: #fff;) .button.green (arka plan rengi: # 0f9d58; renk: #fff;) .Center (Metin Hizası: Merkez;)

Tüm düğme CSS, Box-Shadow özelliğini kullanır. Tüm CSS kodunu silin ve kutu-gölge nasıl çalıştığını görün:

Düğme (geçiş: 0,2'ler; geçiş gecikmesi: 0.2S; kutu-gölge: 0 2px 5px 0 RGBA (0, 0, 0.26);) .Button: Aktif (geçiş gecikmesi: 0S; kutu-gölge: 0 8px 17px 0 RGBA (0, 0, 0, 0.2);)

Box-Shadow özelliği, tüm düğmeye ince gölge eklemek için CSS stilleri düğmesinde kullanılır. Pres edildiğinde, gölge hafifçe artar ve daha hafif olur. Bu hareket, olduğu gibi, sayfadan kullanıcıya atladığı bir 3D Gölge'nin etkisini taklit eder. Etki, malzeme tasarım stillerinde ve ilkelerine kayıtlıdır.

Vlad Merzehevich

Etiket aracılığıyla oluşturulan standart düğmeler

veya Tabii ki, iyi görünüyor, ancak tarzlara bakmalarını değiştirme girişimi korkunç bir sonuca yol açar. Düğmeler, on yıllık arayüzleri mergularıyla tebrik eder (Şekil 1). Tabii ki, bu tür metamorfoz, yalnızca arka planın ve kenarlığın özelliklerini kullanırken, başka bir deyişle, düğmenin rengini ve etrafındaki karenin rengini değiştirmek imkansızdır.

İncir. 1. Kaynak ve değiştirilmiş düğme

Düğmenin görünümünü önemli ölçüde değiştirmek için, görüntüleri kullanabilirsiniz, ancak CSS 3'ün yetenekleri ile karşılaştırıldığında bu seçenek şimdi homegrown görünüyor.

Temel olarak, bir doğrusal dikey degrade ve yuvarlak kenarları içeren tarayıcıdaki orijinal düğmeyi alın.

Border-Radius özelliğini kullandığımız köşelerin yuvarlanmasını sağlamak için en basit olanı, istenen yarıçapı yarıçapını ayarlayın. Her zamanki gibi, tüm tarayıcılarda değil, tam bir set eklemek zorundasınız. Sonuç olarak, aşağıdakiler elde edilir.

Moz-Sınırlı Yarıçapı: 5px; / * Firefox * / -WebKit-Sınır-yarıçapı: 5px; / * Safari 4 * / Sınır-yarıçapı: 5px; / * IE 9, Safari 5, Chrome * /

Düğmeleri Görüntüle B. farklı tarayıcılar Şekil l'de gösterilmiştir. 2.

İncir. 2. köşeleri yuvarlatılmış düğmeler

Genel olarak, her şey bekleniyor. Yaşlı IE sürümleri CSS 3'ü desteklemez, geriye doğru ihtiyacınız olan köşeleri doğru yapın. Bazı nedenlerden dolayı opera, diğer tarayıcıların yaptığı gibi, ancak Opera hakkında da özel bir konuşmaya girecektir.

Şimdi en ilginç olanı, dikey bir doğrusal gradyan yap. Bunun için, her tarayıcı için bireysel stiller olacak.

arka plan: -Moz-linear gradyan (# 00bbd6, #ebffff);

Degrade, başlangıç \u200b\u200bnoktasını, gradyanın açısını, ilk ve nihai rengini gösterir. Bizim olgumuzda, gradyan dikey olarak yukarıdan aşağıya doğru geçtiğinde, yalnızca renkleri ayarlamak yeterlidir, kalan parametreler varsayılan olarak kullanılır.

Chrome, Safari.

arka plan: -Webkit-gradyan (doğrusal, 0, 0,% 100, (# 00bbd6), (#ebfffff));

Degrade (linear), degrade uygulamasının başlangıç \u200b\u200bnoktasını (sol üst açı), son nokta (sol alt açı), ayrıca başlangıç \u200b\u200bve nihai renge gösterir.

Internet Explorer.

filtre: progid: dximagetransform.microsoft.gradient (startcolorstr \u003d "# 00bbd6", endcolorstr \u003d "# ebffff");

IE tarayıcısı kendi yoluyla gider ve farklı etkiler için degrade için de dahil olmak üzere filtre özelliğini uygular. Burada her şey önemsizdir, sadece degradenin ilk ve son rengini yazar.

Opera dinleniyor, bu da degradeler henüz uygulanmadı.

Tarayıcılar, köşeler ve gradyanlar için tüm özellikleri topluyoruz (Örnek 1).

Örnek 1. ile düğmeler lineer gradyan

Kaynak düğmesi

Yeni düğme

Oldukça güzel ortaya çıktı (şek. 3), ama aynı zamanda açık farklılıklar İlk düğmeden - bir tahta gibi düz görünüyor.

İncir. 3. Degrade ile Görünüm düğmesi

İstediğiniz formun düğmesini tekrar gradyan, "oynama" çiçeklerle yapabilirsiniz. Degradenin iki değeri artık yapmaz, Firefox ve Safari bir çözüm sunar.

arka plan: -Moz-linear gradyan (# D0ECF4, # 5BC9E1, # D0ECF4);

İki değer yerine, istediğiniz renk sayısını yerleştirin, degrade, bir renkten diğerine sorunsuz bir şekilde hareket eder.

Chrome, Safari.

arka plan: -Webkit-gradyan (lineer, 0 0, 0% 100, (# d0ecf4), (# d0ecf4), renkli stop (0.5, # 5BC9E1));

Color-stop parametresi, yeni rengin uygulama noktasını belirtir. Değer 0 ile 1 arasında değişir.

Örnek 2. Geliştirilmiş gradyanlı düğmeler

HTML 5 CSS 2.1 CSS 3 IE 9 CR OP SA FX

Örneğin sonucu Şekil 2'de gösterilmiştir. dört.

İncir. 4. Degrade, gradyan nedir

Benzer şekilde, düğme veya başka bir elementte başka bir degradeyi oluşturabilirsiniz (Şek. 5). Ancak bu, atölyenin eklediği şey için zaten kendi başınıza yapılır.

İncir. 5. Böyle farklı düğmeler

Ben özetleyeceğim. Görüntüler olmadan degrade ve yuvarlatılmış köşelerde bir düğme yapabilirsiniz. Ancak, tarayıcılarla birlikte bir arıza ve çadır var. Opera, gradyanlarla nasıl çalışacağını bilmiyor, IE 9'da köşeleri olan bir degrade kombinasyonu olan hoş olmayan bir hata var (Şekil 6).

İncir. 6. IE 9'da Köşeleri Kaplama Arka Planı

"Güzellik" yaptığımız sürece firefox tarayıcıları, Safari ve krom.