CSS ile Basılabilen 3 Boyutlu Buttonlar

Vatanay Özbeyli CSS3, Tasarım Unsurları


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.”

ÖRNEĞİ GÖRÜNTÜLE

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.

.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;
}

.dugme:hover {
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);
}

.dugme:active {
top: 7px;
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);	
}

Ş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ı

<a href="#" class="dugme">adobewordpress.com</a>

Renklendirmeler

Şekil örneklerinden önce biraz renk varyasyonları oluşturalım.

  • Kırmızı

CSS Kodları

.kirmizi {
	background-color: #c34747;
	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);
}

.kirmizi:hover {
	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);
}

.kirmizi:active {
	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);
}

HTML Kodları

<a href="#" class="dugme kirmizi">adobewordpress.com</a>
  • Mavi

CSS Kodları

.mavi {
	background: #2a8ad8;
	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);
}

.mavi:hover {
	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);
}
.mavi:active {
	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);
}

HTML Kodları

<a href="#" class="dugme mavi">adobewordpress.com</a>
  • Turuncu

CSS Kodları

.turuncu {
	background-color: #c37846;
	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);
}

.turuncu:hover {
	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);
}

.turuncu:active {
	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);
}

HTML Kodları

<a href="#" class="dugme turuncu">adobewordpress.com</a>
  • Yeşil

CSS Kodları

.yesil {
	background-color: #7fc345;
	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);
}

.yesil:hover {
	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);
}

.yesil:active {
	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);
}

HTML Kodları

<a href="#" class="dugme yesil">adobewordpress.com</a>
  • Pembe
Bu da ilginizi çekebilir  Sitenize Duyuru Penceresi Ekleyin

CSS Kodları

.pembe {
	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);
	background-color: #d7298b;
}

.pembe:hover {
	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);
}

.pembe:active {
	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);
}

HTML Kodları

<a href="#" class="dugme pembe ">adobewordpress.com</a>
  • Mor

CSS Kodları

.mor {
	background-color: #8a26d3;
	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);
}

.mor:hover {
	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);
}

.mor:active {
	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);
}

HTML Kodları

<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 :

<a href="#" class="dugme kirmizi sag-sol-kesikli">adobewordpress.com</a>
  • Sağ Sol Kesikli

Bu örnekte soldan üst, sağdan alt kısmı kesiyoruz ve bir eğim oluşturuyoruz.

CSS Kodları

.sag-sol-kesikli {
	border-radius: 35px 5px;
}
  • Dikdörtgen Yapıda

Bu örnekte buttonumuzu dikdörtgen yapıda kullanıyoruz. Yani köşeleri biraz daha sertleştiriyoruz.

CSS Kodları

.dikdortgen {
	border-radius: 10px / 35px;
}
  • Tek Köşe Kesimi

Bu örnekte buttonumuzun bir köşesini yuvarlıyoruz.

CSS Kodları

.tek-kose {
	border-radius: 5px 5px 35px 5px;
	padding-right: 25px;
}

Diğer Örnekler

  • Mavi Kutu Button

Buradaki örnekler yukarıdakiler ile tamamıyla bağımsızdır. Daha basit kullanıma sahiptirler.

CSS Kodları

.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;
}

.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ı

<a href="#" class="kutu-mavi">adobewordpress.com</a>
  • Kırmızı Kutu Button

CSS Kodları

.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ı

<a href="#" class="kutu-kirmizi">adobewordpress.com</a>
  • Yeşil Kutu Button

CSS Kodları

.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ı

<a href="#" class="kutu-yesil">adobewordpress.com</a>
  • Gri Kutu Button

CSS Kodları

.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;
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ı

<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.