Ad o b ew o rd p ress. co m / T a sa rı m U n su rl a rı / CSS3 / CSS i l e Ba sı l a b i l en 3 Bo yu tl u Bu tto n l a r
CSS ile Basılabilen 3 Boyutlu Buttonlar Vatanay Özbeyli tarafından 26 Kasım 2012 tarihinde yazıldı. ~ 3 Yorum + Değiştir
CSS ile birçok button hazırladık. Fakat yukarıda gördükleriniz basılma hissiyatını en çok verenler. Box-Shadow ile hem 3 boyut hem de basılma efekti oluşturacağız. Yani buttonu tasarlarken bir yandan da hover için alt yapı oluşturmuş oluyoruz. Bu şu demek oluyor; 50% daha hızlı yüklenen buttonlar ve aynı oranda artan performans. “Bu makalede hazırlayacağımız buttonlar performans-tasarım açısından en iyiler listemde.”
Açıklama ve Notlar Ben sizler için 4 adet örnek hazırladım. Ana renkler RGB’nin yanına bir adette vazgeçilmezim gri tonu kullandım. Ana stil classları içinde white-space:nowrap; kullandım. Böylece link adı ne kadar uzun olursa olsun buttonlar içinde satır atlanmıyor. Eğer bundan rahatsız olursanız white-space:nowrap; kodlarını silin. Buttonları klasik a tagı için hazırladım. Yani var olan HTML tasarımınızda oynama yapmanıza gerek yok. Benzeri rollover link tasarımlarından daha küçük boyutlara sahip, yani daha hızlı. Bu daha hızlı yüklenen sayfa, daha küçük sayfa boyutu demek oluyor. Web geliştiricileri iyi bilirler, yüklenme hızı web tasarımında en önemli elementlerin başında gelir.
Örnekler > Temel Kod Aşağıdaki örnekler için bu temel CSS kodunu sitenize eklemelisiniz. 1 2 3 4 5 6 7 8
.dugme { text-decoration: none; color: #fff; padding: 12px 20px; font:bold 13px Tahoma, Geneva, sans-serif; border-radius: 10px; background-color: #666666; box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2); position: relative; border-bottom: 1px solid rgba(255,255,255,0.2); display: inline-block; text-shadow: 0px -1px 0px rgba(0,0,0,0.2); margin-bottom: 40px; margin-right: 5px; }
9 10 11 12 13 14 15 16 17 .dugme:hover { 18 box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2); 19 } 20 21 .dugme:active { 22 top: 7px; 23 box-shadow: 0 2px 0 #393939, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2); 24 } Şimdi button örneklerine başlayalım. Normal Hali Buttonun varsayılan rengini gri olarak yukarıdaki temel kodda atadık. O yüzden normal hali için sadece HTML kodu yazacağız.
HTML Kodları 1 <a href="#" class="dugme">adobewordpress.com</a>
Renklendirmeler Şekil örneklerinden önce biraz renk varyasyonları oluşturalım.
Kırmızı
CSS Kodları 1 .kirmizi { 2 background-color: #c34747; 3 box-shadow: 0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2); 4 } 5 6 .kirmizi:hover { 7 box-shadow: 0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2); 8 } 9 10 .kirmizi:active { 11 box-shadow: 0 2px 0 #5e2525, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2); 12 } HTML Kodları 1 <a href="#" class="dugme kirmizi">adobewordpress.com</a> Mavi
CSS Kodları 1 .mavi { 2 background: #2a8ad8; 3 box-shadow: 0 5px 5px #364a8e, 0 9px 0 #25325e, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2); 4 } 5 6 .mavi:hover { 7 box-shadow: 0 5px 5px #364a8e, 0 9px 0 #25325e, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2); 8 } 9 .mavi:active { 10 box-shadow: 0 2px 0 #25325e, 0px 4px 4px
rgba(0,0,0,0.3), inset 0px 2px 5px rgba(0,0,0,0.2); 11 } HTML Kodları 1 <a href="#" class="dugme mavi">adobewordpress.com</a> Turuncu
CSS Kodları 1 .turuncu { 2 background-color: #c37846; 3 box-shadow: 0 5px 5px #855031, 0 9px 0 #5e3a25, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2); 4 } 5 6 .turuncu:hover { 7 box-shadow: 0 5px 5px #855031, 0 9px 0 #5e3a25, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2); 8 } 9 10 .turuncu:active { 11 box-shadow: 0 2px 0 #5e3a25, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2); 12 } HTML Kodları 1 <a href="#" class="dugme turuncu">adobewordpress.com</a> Yeşil
CSS Kodları 1 .yesil { 2 background-color: #7fc345; 3 box-shadow: 0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2); 4 } 5
6 .yesil:hover { 7 box-shadow: 0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2); 8 } 9 10 .yesil:active { 11 box-shadow: 0 2px 0 #385e25, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2); 12 } HTML Kodlar覺 1 <a href="#" class="dugme yesil">adobewordpress.com</a> Pembe
CSS Kodlar覺 1 .pembe { 2 box-shadow: 0 5px 5px #782d54, 0 9px 0 #5e254c, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2); 3 background-color: #d7298b; 4 } 5 6 .pembe:hover { 7 box-shadow: 0 5px 5px #782d54, 0 9px 0 #5e254c, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2); 8 } 9 10 .pembe:active { 11 box-shadow: 0 2px 0 #5e254c, 0px 4px 4px rgba(0,0,0,0.3), inset 0px 2px 5px rgba(0,0,0,0.2); 12 } HTML Kodlar覺 1 <a href="#" class="dugme pembe ">adobewordpress.com</a> Mor
CSS Kodlar覺
1 .mor { 2 background-color: #8a26d3; 3 box-shadow: 0 5px 5px #54307b, 0 9px 0 #3f255e, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2); 4 } 5 6 .mor:hover { 7 box-shadow: 0 5px 5px #54307b, 0 9px 0 #3f255e, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2); 8 } 9 10 .mor:active { 11 box-shadow: 0 2px 0 #42255e, 0px 4px 4px rgba(0,0,0,0.3), inset 0px 2px 5px rgba(0,0,0,0.2); 12 } HTML Kodları 1 <a href="#" class="dugme mor">adobewordpress.com</a>
Şekillendirme Şimdi yukarıda hazırladığımız rengarenk buttonları şekillendirelim. Şekillendirme yapmanız için HTML kodunuzdaki class alanına istediğiniz tasarımın ismini yazmanız gerekiyor. Örneğin aşağıdaki sağ sol kesikli şekliyle kırmızı bir button oluşturacak olsak kullanacağımız kod şöyle olurdu : 1 <a href="#" class="dugme kirmizi sag-solkesikli">adobewordpress.com</a> Sağ Sol Kesikli Bu örnekte soldan üst, sağdan alt kısmı kesiyoruz ve bir eğim oluşturuyoruz.
CSS Kodları 1 .sag-sol-kesikli { 2 border-radius: 35px 5px; 3 } Dikdörtgen Yapıda Bu örnekte buttonumuzu dikdörtgen yapıda kullanıyoruz. Yani köşeleri biraz daha sertleştiriyoruz.
CSS Kodları 1 .dikdortgen { 2 border-radius: 10px / 35px; 3 } Tek Köşe Kesimi Bu örnekte buttonumuzun bir köşesini yuvarlıyoruz.
CSS Kodları 1 .tek-kose { 2 border-radius: 5px 5px 35px 5px; 3 padding-right: 25px; 4 }
Diğer Örnekler Mavi Kutu Button Buradaki örnekler yukarıdakiler ile tamamıyla bağımsızdır. Daha basit kullanıma sahiptirler.
CSS Kodları 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
.kutu-mavi{ background:#4e68c7; box-shadow:1px 0px 1px #203891, 0px 1px 1px #3852b1,2px 1px 1px #203891, 1px 2px 1px #3852b1,3px 2px 1px #203891, 2px 3px 1px #3852b1,4px 3px 1px #203891, 3px 4px 1px #3852b1,5px 4px 1px #203891, 4px 5px 1px #3852b1,6px 5px 1px #203891; color:white; white-space:nowrap; font:13px Tahoma, Geneva, sans-serif; padding:6px 13px; position:relative; top:-5px; text-decoration:none; text-shadow:#152560 1px 1px;
17 18 19 20 21 22 23 24 25 26 27 28 29 30
} .kutu-mavi:hover,.kutu-mavi:focus{ color:white; background:#3d57b4; } .kutu-mavi:active{ box-shadow:1px 0px 1px #203891, 0px 1px 1px #3852b1,2px 1px 1px #203891, 1px 2px 1px #3852b1,3px 2px 1px #203891; top:-2px; left:3px; }
HTML Kodları 1 <a href="#" class="kutu-mavi">adobewordpress.com</a> Kırmızı Kutu Button
CSS Kodları 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
.kutu-kirmizi{ background:#c74e4e; box-shadow:1px 0px 1px #912020, 0px 1px 1px #b13838,2px 1px 1px #912020, 1px 2px 1px #b13838,3px 2px 1px #912020, 2px 3px 1px #b13838,4px 3px 1px #912020, 3px 4px 1px #b13838,5px 4px 1px #912020, 4px 5px 1px #b13838,6px 5px 1px #912020; color:white; white-space:nowrap; font:13px Tahoma, Geneva, sans-serif; padding:6px 13px; position:relative; top:-5px; text-decoration:none; text-shadow:#601515 1px 1px; } .kutu-kirmizi:hover,.kutu-mavi:focus{ color:white; background:#b43d3d; } .kutu-kirmizi:active{ box-shadow:1px 0px 1px #912020, 0px 1px 1px #b13838,2px 1px 1px #912020, 1px 2px 1px #b13838,3px 2px 1px #912020; top:-2px; left:3px; }
HTML Kodları 1 <a href="#" class="kutukirmizi">adobewordpress.com</a>
Yeşil Kutu Button
CSS Kodları 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
.kutu-yesil{ background:#4ec75f; box-shadow:1px 0px 1px #209133, 0px 1px 1px #38b149,2px 1px 1px #209133, 1px 2px 1px #38b149,3px 2px 1px #209133, 2px 3px 1px #38b149,4px 3px 1px #209133, 3px 4px 1px #38b149,5px 4px 1px #209133, 4px 5px 1px #38b149,6px 5px 1px #209133; color:white; white-space:nowrap; font:13px Tahoma, Geneva, sans-serif; padding:6px 13px; position:relative; top:-5px; text-decoration:none; text-shadow:#156023 1px 1px; } .kutu-yesil:hover,.kutu-mavi:focus{ color:white; background:#3db453; } .kutu-yesil:active{ box-shadow:1px 0px 1px #209133, 0px 1px 1px #38b149,2px 1px 1px #209133, 1px 2px 1px #38b149,3px 2px 1px #209133; top:-2px; left:3px; }
HTML Kodları 1 <a href="#" class="kutu-yesil">adobewordpress.com</a> Gri Kutu Button
CSS Kodları 1 2 3 4 5 6 7 8 9
.kutu-gri{ background:#c7c7c7; box-shadow:1px 0px 1px #919191, 0px 1px 1px #b0b0b0,2px 1px 1px #919191, 1px 2px 1px #b0b0b0,3px 2px 1px #919191, 2px 3px 1px #b0b0b0,4px 3px 1px #919191, 3px 4px 1px #b0b0b0,5px 4px 1px #919191, 4px 5px 1px #b0b0b0,6px 5px 1px #919191; color:white;
10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
white-space:nowrap; font:13px Tahoma, Geneva, sans-serif; padding:6px 13px; position:relative; top:-5px; text-decoration:none; text-shadow:#616161 1px 1px; } .kutu-gri:hover,.kutu-mavi:focus{ color:white; background:#b5b5b5; } .kutu-gri:active{ box-shadow:1px 0px 1px #919191, 0px 1px 1px #b0b0b0,2px 1px 1px #919191, 1px 2px 1px #b0b0b0,3px 2px 1px #919191; top:-2px; left:3px; }
HTML Kodları 1 <a href="#" class="kutu-gri">adobewordpress.com</a> Not : Pastel renkler kullanmanızı tavsiye ederim. Şimdilik bu kadar. Bir sonraki CSS konulu yazımda görüşmek üzere, hoşça kalın.
Benzer Konular: CSS ile Etkileyici Gölge Efektleri CSS ile 3D, Blur, Ateş, Buz, Neon, Asit, Alfa ve Anaglyph… CSS ile Title ve Alt Etiketlerini Renklendirin CSS ile Oyulmuş Yazı Efekti CSS ile Yumuşak Geçişli Arka Planlar
Yazı Kategorisi : CSS3 , Tasarım Unsurları Anahtar Kelimeler : 3 , 3d , basılabilir , basınca , boyutlu , Button , css , CSS3 , dimension , düğme , gerçek , göçen , link , linkler , menu , pastel , rengarenk , renk ,