Blogger Animasyonlu Buton Eklentisi

Blogunuza bir şıklık getirecek eklenti ile karşınızdayız. Bu eklentimiz ise blogunuzda paylaştığınız bağlantı linklerine verilebilecek buton örneğinden birisi. Üzerine gelince arkaplanda ki kutucukların hareketlenmesiyle şıklık veren bu butonu sitemizde sizler için paylaşıyoruz. İsterseniz anlatıma ve canlı bir demoya geçelim.

Aşağıda ki kodu temamızdan buluyoruz.

Hemen altına aşağıda ki kodu ekliyoruz.

.buton{
font:15px Calibri, Arial, sans-serif;
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-repeat:no-repeat;
background-position:bottom left;
background-image:url('http://s6.postimg.org/a8fhgwzdp/button_bg.png');
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;
}
.buton:hover{
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}
.buton:active{
bottom:-1px;
}
/* The three butons sizes */
.buton.phtml { font-size:30px;}
.buton.medium { font-size:18px;}
.buton.small { font-size:13px;}
/* BlueButton */
.mavi.buton{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;
background-color: #48b5f2;
background-image: url('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), url('http://s6.postimg.org/a8fhgwzdp/button_bg.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://s6.postimg.org/a8fhgwzdp/button_bg.png'), url('http://s6.postimg.org/a8fhgwzdp/button_bg.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));
}
.mavi.buton:hover{
background-color:#63c7fe;
background-image: url('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), url('http://s6.postimg.org/a8fhgwzdp/button_bg.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://s6.postimg.org/a8fhgwzdp/button_bg.png'), url('http://s6.postimg.org/a8fhgwzdp/button_bg.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));
}
/* Green Button */
.yesil.buton{
color:#345903 !important;
border:1px solid #96a37b !important;
background-color: #79be1e;
background-image:url('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), url('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
background-image:url('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), url('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}
.yesil.buton:hover{
background-color:#89d228;
background-image:url('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), url('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
background-image:url('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), url('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
/* Orange Button */
.turuncu.buton{
color:#693e0a !important;
border:1px solid #bea280 !important;
background-color: #e38d27;
background-image:url('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), url('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
background-image:url('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), url('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}
.turuncu.buton:hover{
background-color:#ec9732;
background-image:url('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), url('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
background-image:url('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), url('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}
/* Orange Button */
.gri.buton{
color:#525252 !important;
border:1px solid #a5a5a5 !important;
background-color: #a9adb1;
background-image:url('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), url('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
background-image:url('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), url('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}
.gri.buton:hover{
background-color:#b6bbc0;
background-image:url('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), url('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
background-image:url('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), url('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}

Butonları Kullanmak için aşağıdaki kodları kullanıyoruz..

Mavi Buton Turuncu Buton

Yeşil Buton Gri Buton

	RapTube - ArabekRap Sitesi
	ArabeskRap'in Tek Adresi A'dan Z'ye Tüm Rapler. Arsız Bela, Asi Styla, Funndy Ve Daha Fazlası İçin Bizi Seçin.
	Müzik Dinleme Portalı
	Yeni Sitemiz Ve Yeni Tasarımımızla Yerli Ve Yabancı Tam 9 Milyon'dan Fazla Müzik Sizlerle
	Html Kodları - Canlı Tv izle - Radyo Dinle
	Html Ve Facebook Kodları Arşiv Sitesi.

Blogger Animasyonlu Buton Eklentisi

0 yorum:

Haftanın Hit Yayınları

Sponsor Reklam

Abone Ol

Blogger Eklentileri !

Rastgele Konularımız..!

PHtmlDrive Reklam Alanı