Kategori : CSS HTML

Sitenizde bir konudaki indir veya önizleme butonuna ihtiyacınız varsa bu butonu kullanabilirsiniz. Bu butonu kendim yaptım. İnternet Explorer hariç tüm tarayıcılara uyumludur. Üstünde yazan metni değiştirebilirsiniz. Üstüne tıklamayı unutmayın! :) Çünkü transtation efekti var. Yavaşça iniyor ve kalkıyor. HTML ve CSS kodlarına aşağıdan ulaşabilirsiniz.

Önizleme

CSS Kodu

Aşağıdaki kodu temanızın CSS bölümüne koyunuz.

.ogbutonlar{text-decoration:none;color: #fff !important;font-weight:bold;padding:12px 20px;font-size:18px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;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);-webkit-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);-moz-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);-o-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);-ms-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;font-family:Arial,Helvetica,sans-serif;text-shadow:0px -1px 0px rgba(0,0,0,0.2);-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;transition:all .2s ease-in-out;text-decoration: none !important;} .ogbutonlar: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);-webkit-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);-moz-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);-o-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);-ms-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);color:#fff!important;text-decoration: none !important;} .ogbutonlar: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);-webkit-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);-moz-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);-o-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);-ms-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);color: #fff !important;text-decoration: none !important;}

HTML Kodu

Aşağıdaki kodu kodun görünmesini istediğiniz yere ekleyiniz.

buton, 3 boyutlu siyah buton ekle

İletişim	İletişim
İletişim	İletişim
İletişim	İletişim

Sitene 3 Boyutlu Siyah Buton Ekle

Önizleme

CSS Kodu

HTML Kodu

Yorumlar

Yorum Yap !

REKLAM ALANI

KATEGORİLER

POPÜLER YAYINLAR

LİNKLER

IVIR ZIVIR

İÇERİK