Menu

Blogger Demo İndir Butonları Animasyonlu 3 Adet

Blogger CSS demo indir buttonlarını,demo indir düğmesini göstermek istediğiniz yazılarınıza ekleyerek sayfalarınıza canlılık katarsınız.Örneğin bir kod yayımladınız kodun demosunu göstermek isterseniz aşağıdaki kodlardan birini sitenize eklemeniz yeterlidir.Veya bir tema yayımladınız temanın demosunu veya indirme adresini blogger css buttonlarına ekleyebilirsiniz.

Blogger yazılarınızda kullanabileceğiniz çok kullanışlı bu butonlar ile Ön İzle (Demo) ve İndir (Download) linklerinizi oldukça şık bir şekilde site ziyaretçilerinize sunabilirsiniz.


Blogger Demo İndir Butonları Animasyonlu 3 Adet

Blogger CSS Button Kodunu Düzenleme

HTML olan kodları ise yazınızın neresine eklemek istiyorsanız sayfanızın kod kısmına geçerek CSS kodlarının altında bulunan HTML kodlarınızı ekleyiniz.Sayfanızın ön izlemesini yaptığınızda bazende makalenizi yayınladıktan sonra butonlar görünecektir.

Blogger paneline giriş yaptıktan sonra Şablon > HTML'yi düzenleden sonra kodlarınızın içinde bulunan ]]> </ b: skin> arayın bulduğunuz bu kodun üstüne aşağıda verdiğim kodu ekleyiniz ve şablonunuzu kaydediniz.


1.Sitil
Blogger Demo İndir Butonları Animasyonlu 3 Adet

CSS
body {font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif;font-size: 13px;}#seomektebi {width:165px;height:23px;display:block;font-size:12px;font-weight:bold;color:#fff;text-decoration:none;text-transform:uppercase;text-align:center;text-shadow:1px 1px 0px #07526e;padding-top:12px;margin:40px auto;left:30px;position:relative;cursor:pointer;border-left:solid 1px #2ab7ec;background-image: -o-linear-gradient(bottom, rgb(14,137,182) 0%, rgb(22,179,236) 100%);background-image: -moz-linear-gradient(bottom, rgb(14,137,182) 0%, rgb(22,179,236) 100%);background-image: -webkit-linear-gradient(bottom, rgb(14,137,182) 0%, rgb(22,179,236) 100%);background-image: -ms-linear-gradient(bottom, rgb(14,137,182) 0%, rgb(22,179,236) 100%);background-image: linear-gradient(bottom, rgb(14,137,182) 0%, rgb(22,179,236) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e89b6', endColorstr='#16b3ec',GradientType=0 );-webkit-border-top-right-radius: 5px;-webkit-border-bottom-right-radius: 5px;-moz-border-radius-topright: 5px;-moz-border-radius-bottomright: 5px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;-webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #07526e, 0px 10px 5px #999;-moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #07526e, 0px 10px 5px #999;-o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #07526e, 0px 10px 5px #999;box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #07526e, 0px 10px 5px #999;}#seomektebi:active {top:3px;-webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 5px 3px #999;-moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 5px 3px #999;-o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 5px 3px #999;box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 5px 3px #999;}#seomektebi:after {content:"2";width:35px;height:25px;display:block;position:absolute;padding-top:10px;top:0px;margin-left:-25px;font-size:16px;font-weight:bold;color:#8fd1ea;text-shadow:1px 1px 0px #07526e;border-right:solid 1px #07526e;background-image: -o-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);background-image: -moz-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);background-image: -webkit-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);background-image: -ms-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);background-image: linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a5e7d', endColorstr='#0e8bb8',GradientType=0 );-webkit-border-top-left-radius: 5px;-webkit-border-bottom-left-radius: 5px;-moz-border-radius-topleft: 5px;-moz-border-radius-bottomleft: 5px;border-top-left-radius: 5px;border-bottom-left-radius: 5px;-webkit-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;-moz-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;-o-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;}#seomektebi:active:after {top:-3px;-webkit-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;-moz-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;-o-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;}#seomektebi:first-child:after {content: "1";}#seomektebi:last-child:after {content: "2";}
HTML


<div class="classment">
<a id="seomektebi" href="url">Demo</a>
<a id="seomektebi" href="url">İndir</a></div>

2.Sitil

Blogger Demo İndir Butonları Animasyonlu 3 Adet


CSS
html{background:#f0f0f0;padding:20px;}body {width: 250px;margin: 0 auto;}.seomektebi {position: relative;width:220px;height:40px;text-align:center;color:#FFF;text-decoration:none;line-height:43px;font-family:'Oswald', Helvetica;display: block;margin: 30px;}.seomektebi:before {background:#f0f0f0;background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D0D0D0), to(#f0f0f0));-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;-moz-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;position: absolute;content: "";left: -6px; right: -6px;top: -6px; bottom: -10px;z-index: -1;}.seomektebi:active {-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset;top:5px;}.seomektebi:active:before{top: -11px;bottom: -5px;content: "";}.red {text-shadow:-1px -1px 0 #A84155;background: #D25068;border:1px solid #D25068;background-image:-webkit-linear-gradient(top, #F66C7B, #D25068);background-image:-moz-linear-gradient(top, #F66C7B, #D25068);background-image:-ms-linear-gradient(top, #F66C7B, #D25068);background-image:-o-linear-gradient(top, #F66C7B, #D25068);background-image:linear-gradient(to bottom, #F66C7B, #D25068);-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);}.red:hover {background: #F66C7B;background-image:-webkit-linear-gradient(top, #D25068, #F66C7B);background-image:-moz-linear-gradient(top, #D25068, #F66C7B);background-image:-ms-linear-gradient(top, #D25068, #F66C7B);background-image:-o-linear-gradient(top, #D25068, #F66C7B);background-image:linear-gradient(top, #D25068, #F66C7B);}.blue {text-shadow:-1px -1px 0 #2C7982;background: #3EACBA;border:1px solid #379AA4;background-image:-webkit-linear-gradient(top, #48C6D4, #3EACBA);background-image:-moz-linear-gradient(top, #48C6D4, #3EACBA);background-image:-ms-linear-gradient(top, #48C6D4, #3EACBA);background-image:-o-linear-gradient(top, #48C6D4, #3EACBA);background-image:linear-gradient(top, #48C6D4, #3EACBA);-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);}.blue:hover {background: #48C6D4;background-image:-webkit-linear-gradient(top, #3EACBA, #48C6D4);background-image:-moz-linear-gradient(top, #3EACBA, #48C6D4);background-image:-ms-linear-gradient(top, #3EACBA, #48C6D4);background-image:-o-linear-gradient(top, #3EACBA, #48C6D4);background-image:linear-gradient(top, #3EACBA, #48C6D4);}
HTML

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'><a class="seomektebi red" href="url">Demo</a><a class="seomektebi blue" href="url">İndir</a>

3.Sitil
Blogger Demo İndir Butonları Animasyonlu 3 Adet



CSS

body {text-align: center;}.seomektebi {display: inline-block;margin: 10px;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;-webkit-box-shadow: 0 8px 0 #000000, 0 15px 20px rgba(0, 0, 0, .35);-moz-box-shadow: 0 8px 0 #c5376d, 0 15px 20px rgba(0, 0, 0, .35);box-shadow: 0 8px 0 #c5376d, 0 15px 20px rgba(0, 0, 0, .35);-webkit-transition: -webkit-box-shadow .1s ease-in-out;-moz-transition: -moz-box-shadow .1s ease-in-out;-o-transition: -o-box-shadow .1s ease-in-out;transition: box-shadow .1s ease-in-out;font-size: 50px;color: #fff;}.seomektebi span {display: inline-block;padding: 20px 30px;background-color: #ec528d;background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(hsla(338, 90%, 80%, .8)), to(hsla(338, 90%, 70%, .2)));background-image: -webkit-linear-gradient(hsla(338, 90%, 80%, .8), hsla(338, 90%, 70%, .2));background-image: -moz-linear-gradient(hsla(338, 90%, 80%, .8), hsla(338, 90%, 70%, .2));background-image: -o-linear-gradient(hsla(338, 90%, 80%, .8), hsla(338, 90%, 70%, .2));-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;-webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);-moz-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);font-family: 'Pacifico', Arial, sans-serif;line-height: 1;text-shadow: 0 -1px 1px rgba(175, 49, 95, .7);-webkit-transition: background-color .2s ease-in-out, -webkit-transform .1s ease-in-out;-moz-transition: background-color .2s ease-in-out, -moz-transform .1s ease-in-out;-o-transition: background-color .2s ease-in-out, -o-transform .1s ease-in-out;transition: background-color .2s ease-in-out, transform .1s ease-in-out;}.seomektebi:hover span {background-color: #ec6a9c;text-shadow: 0 -1px 1px rgba(175, 49, 95, .9), 0 0 5px rgba(255, 255, 255, .8);}.seomektebi:active, .seomektebi:focus {-webkit-box-shadow: 0 8px 0 #c5376d, 0 12px 10px rgba(0, 0, 0, .3);-moz-box-shadow: 0 8px 0 #c5376d, 0 12px 10px rgba(0, 0, 0, .3);box-shadow: 0 8px 0 #c5376d, 0 12px 10px rgba(0, 0, 0, .3);}.seomektebi:active span {-webkit-transform: translate(0, 4px);-moz-transform: translate(0, 4px);-o-transform: translate(0, 4px);transform: translate(0, 4px);}


HTML
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'><a class="seomektebi" href="url"><span>Demo</span></a><a class="seomektebi" href="url"><span>İndir</span></a>

Blogger Demo İndir Butonları Animasyonlu 3 Adet Nasıl kullanılacak


Bu butonları kullanmak içim HTML bölümüne gelerek aşağıda kullanmak istediğimiz renkteki butonu seçerek HTML bölümüne ekleyiniz,url adresi yazan yere kendi adınızı veya link vermek isteyeceğiniz adresi ekleyiniz.Buton Yazısı olan yere bağlantı adresinizi yazınız.

Sonraki Yazılar
« Prev Post
Önceki Yazılar
Next Post »

Henüz Yorum Yapılmamış " Blogger Demo İndir Butonları Animasyonlu 3 Adet "

Önerilen Yazı
×