Animasyonlu Demo ve Download Butonları

Blogger tabanlı indirme siteniz varsa ve buton arıyorsanız size önerebileceğimiz en iyi butonlar bunlar.Hemen nasıl kullanabileceğinizi gösterelim.

Yönetim Paneli > Şablon > HTML'yi Düzenle seçeneğine tıklayıp CTRL+F yardımıyla kodunu aratın ve aşağıda ki verdiğimiz kodları kodunun üzerine yapıştırın.



Daha sonra CTRL+F yardımıyla kodunu aratın ve aşağıda ki verdiğimiz kodları kodunun üzerine yapıştırın.

.whitebutton {

margin: 20px auto;

padding: 20px 0;

width: 200px;

}



.whitebutton a {

background: #fff;

color: #666;

display: block;

font-size: 17px;

font-weight: 700;

font-family: 'Arial',Verdana,sans-serif;

height: 50px;

line-height: 50px;

text-align: center;

text-decoration: none;

text-transform: uppercase;

width: 200px;

position: relative;

z-index: 2;

}



.whitebutton a:before {

content: '\f019';

font-family: FontAwesome;

font-weight: normal;

padding: 8px;

margin-left: -12px;

margin-right: 6px;

}



.whitebutton span {

background: #444;

color: #fff;

display: block;

font-size: 12px;

font-family: 'Arial', Verdana,sans-serif;

height: 40px;

line-height: 40px;

text-align: center;

width: 200px;

z-index: 1;

text-transform: uppercase;

font-weight: bold;

}



.whitebutton .up {

background: #e25734;

margin: -25px auto;

opacity: 0;

border-radius: 0 0 5px 5px;

transform: translate(0,-50px);

transition: 350ms;

}



.whitebutton .down {

margin: -30px auto;

opacity: 0;

border-radius: 5px 5px 0 0;

transform: translate(0,-50px);

transition: 350ms;

}



.whitebutton .down:before {

content:'\f14a';

font-family: FontAwesome;

font-weight: normal;

margin-right: 6px;

color: #aaa;

}



.whitebutton:hover .up {

opacity: 1;

transform: translate(0,0);

}



.whitebutton:hover .down {

opacity: 1;

transform: translate(0,-90px);

}



.whitebuttondemo {

margin: 20px auto;

padding: 20px 0;

width: 200px;

}



.whitebuttondemo a {

background: #e25734;

color: #fff;

display: block;

font-size: 17px;

font-weight: 700;

font-family:'Arial',Verdana,sans-serif;

height: 50px;

line-height: 50px;

text-align: center;

text-decoration: none;

text-transform: uppercase;

width: 200px;

position: relative;

z-index: 2;

transition: 350ms;

}



.whitebuttondemo a:before {

content:'\f002';

font-family: FontAwesome;

font-weight: normal;

padding: 8px;

margin-left: -12px;

margin-right: 6px;

}



.whitebuttondemo a:hover {

color: #fff;

}



.whitebuttondemo span {

background: #444;

color: #fff;

display: block;

font-size: 12px;

font-family: 'Arial', Verdana,sans-serif;

height: 40px;

line-height: 40px;

text-align: center;

width: 200px;

z-index: 1;

text-transform: uppercase;

font-weight: bold;

}



.whitebuttondemo .up {

background: #444;

margin: -25px auto;

opacity: 0;

border-radius: 0 0 5px 5px;

transform: translate(0,-50px);

transition: 350ms;

}



.whitebuttondemo:hover .up {

opacity: 1;

transform: translate(0,0);

}

Butonları görmek için aşağıda ki HTML kodunu kullanın.

Demo

click to view

Download

click to begin

1.6MB .rar

"#" olan yerlere demo ve download linklerini koyun.Koyarken başında http:// koymayı unutmayın.

DEMO

Kaynak: http://www.siteeklentileri.com/2015/04/blogger-icin-basit-demo-ve-download.html

Teşekkürler hocam :)