Kategori : CSS HTML

Sitemde kullanmak için bir tema ararken karşılaştığım bu butonlarla. Çok güzel renklere sahip. Özellikle hoverde baloncuklar ileri geri gidiyor ya onlara bayılıyorum. Sizde dosya indirken, tema demosu gösterirken kullanabilirsiniz. Üzerinde yazan yazı, kolayca değiştirilebiliyor. Aşağıda CSS ve HTML kodu bulunuyor. Alıp gerekli yerlere ekleyebilirsiniz.

Önizleme

Önizleme

İndir

CSS Kodu

Bu kodu temanızın stil bölümüne koyunuz.

.ozgurgorgulubuton{font:15px Calibri, Arial, sans-serif;text-shadow:1px 1px 0 rgba(255,255,255,0.4);-webkit-text-shadow:1px 1px 0 rgba(255,255,255,0.4);-moz-text-shadow:1px 1px 0 rgba(255,255,255,0.4);text-decoration:none !important;white-space:nowrap;display:inline-block;vertical-align:baseline;position:relative;cursor:pointer;padding:10px 20px;background:url('http://img.webme.com/pic/5/5426/yenimavibuton1.png') no-repeat bottom left; background-position:bottom left, top right, 0 0, 0 0;background-clip:border-box;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;-moz-box-shadow:0 0 1px #fff inset;-webkit-box-shadow:0 0 1px #fff inset;box-shadow:0 0 1px #fff inset;-webkit-transition:background-position 1s;-moz-transition:background-position 1s;transition:background-position 1s;height:150;width:200px;font-size:25px;} .ozgurgorgulubuton:hover{background-position:top left;background-position:top left, bottom right, 0 0, 0 0;} .ozgurgorgulubuton:active{bottom:-1px;} .ozgurgorgulubuton{color:#0f4b6d !important;border:1px solid #84acc3 !important;background:#48b5f2 url('http://img.webme.com/pic/5/5426/yenimavibuton1.png'), url('http://img.webme.com/pic/5/5426/yenimavibuton1.png'),-moz-radial-gradient( center bottom, circle, rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),-moz-linear-gradient(#4fbbf7, #3faeeb);background-image: url('http://img.webme.com/pic/5/5426/yenimavibuton1.png'), url('http://img.webme.com/pic/5/5426/yenimavibuton1.png'),-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100, from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));} .ozgurgorgulubuton:hover{background-color:#63c7fe;background-image: url('http://img.webme.com/pic/5/5426/yenimavibuton1.png'), url('http://img.webme.com/pic/5/5426/yenimavibuton1.png'),-moz-radial-gradient( center bottom, circle, rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),-moz-linear-gradient(#63c7fe, #58bef7);background-image: url('http://img.webme.com/pic/5/5426/yenimavibuton1.png'), url('http://img.webme.com/pic/5/5426/yenimavibuton1.png'),-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100, from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));}

HTML Kodu

Bu kodu görünmesini istediğiniz yere koyun.

css, css buton, css3 buton

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

CSS Yeni Mavi Butonlar

Önizleme

CSS Kodu

HTML Kodu

Yorumlar

Yorum Yap !

REKLAM ALANI

KATEGORİLER

POPÜLER YAYINLAR

LİNKLER

IVIR ZIVIR

İÇERİK