Blogger - 3 Boyutlu Css Buttonlar

Merhaba Arkadaşlar Bugün Sizlere 3 Boyutlu Css Butonlarını Göstermekteyim. Yabancı Bir Sitede Buldum Sizlere Yararlı Olucağını Düşüdüm. Umarım Beğenirsiniz.

Demo

  1. Adım Şablon > Htmlyi Düzenle'ye Tıklıyoruz. CTRL+F Yaparak ]]>
Aratıyoruz. Ve Aşağıda Bulunan Kodu ]]>
Üstüne Yapıştırıyoruz.
.3dbutton { background: #fff; padding: 30px 20px 20px 20px; } .button { text-decoration: none; color: #fff; font-weight: bold; padding: 12px 20px; font-size: 18px; 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; } .button: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); } .shield { border-radius: 5px 5px 35px 35px; padding-left: 25px; padding-right: 25px; } .criss-cross { border-radius: 35px 5px; } .rectangular { border-radius: 10px / 35px; } .one-corner { border-radius: 5px 5px 35px 5px; padding-right: 25px; } .pressure { } .button { margin-right: 20px; } .button: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); } .red { 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); } .red: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); } .red: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); } .orange { 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); } .orange: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); } .orange: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); } .green { 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); } .green: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); } .green: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); } .pink { 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; } .pink: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); } .pink: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); } .blue { 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); } .blue: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); } .blue: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); } .purple { 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); } .purple: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); } .purple: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); }

Kaydedip Çıkıyoruz.

2. Adım Aşağıda Bulunan Kodu İster Menü Olarak İsterseniz İndir - Demo Göster Gibi Eklentiler İçin Kullanıcağız.

<div class="3dbutton"> <a href="#" class="button">A BUTTON</a> <a href="#" class="button red shield">A BUTTON</a> <a href="#" class="button orange rectangular">A BUTTON</a> <a href="#" class="button green criss-cross">A BUTTON</a> <a href="#" class="button blue one-corner">A BUTTON</a> <a href="#" class="button pink">A BUTTON</a> <a href="#" class="button purple shield">A BUTTON</a> </div>


İşlem Bu Kadar Basit Umarım Beğenmişsinizdir. Güle Güle Kullanın :))