Blogger Çeşit Çeşit Butonlar

 Bloglarınızda bir çok yaratıcı şekilde kullanabileceğiniz çeşit çeşit renk renk butonları sizlere sunuyorum.

Nasıl Eklenir:

• Blogger yönetim paneline giriş yapıyoruz.
• Tema → HTML'yi Düzenle yolunu izliyoruz.
• Kullanmak istediğimiz butonun 1. kodunu kopyalıyoruz.
• Kodların içerisine her hangi bir yere tıklayıp Ctrl+F yardımı ile ]]></b:skin> kodunu aratıyoruz ve hemen üzerine kopyaladığımız kodu ekliyoruz. Ve temamızı kayediyoruz.
• Son olarak 2. kodu butonumuzun gözükmesini istediğimiz yere ekliyoruz.

Tasarım 1

.htmlevi1 { background-color:#44c767; -moz-border-radius:28px; -webkit-border-radius:28px; border-radius:28px; border:1px solid #18ab29; display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:17px; padding:16px 31px; text-decoration:none; text-shadow:0px 1px 0px #2f6627; } .htmlevi1:hover { background-color:#5cbf2a; } .htmlevi1:active { position:relative; top:1px; } <button class="htmlevi1 onclick=" window.location.href="http://htmlevi.blogspot.com">TASARIM 1</button>

Tasarım 2

.htmlevi2 { -moz-box-shadow: 0px 0px 0px 2px #9fb4f2; -webkit-box-shadow: 0px 0px 0px 2px #9fb4f2; box-shadow: 0px 0px 0px 2px #9fb4f2; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #7892c2), color-stop(1, #476e9e)); background:-moz-linear-gradient(top, #7892c2 5%, #476e9e 100%); background:-webkit-linear-gradient(top, #7892c2 5%, #476e9e 100%); background:-o-linear-gradient(top, #7892c2 5%, #476e9e 100%); background:-ms-linear-gradient(top, #7892c2 5%, #476e9e 100%); background:linear-gradient(to bottom, #7892c2 5%, #476e9e 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7892c2', endColorstr='#476e9e',GradientType=0); background-color:#7892c2; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; border:1px solid #4e6096; display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:19px; padding:12px 37px; text-decoration:none; text-shadow:0px 1px 0px #283966; } .htmlevi2:hover { background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #476e9e), color-stop(1, #7892c2)); background:-moz-linear-gradient(top, #476e9e 5%, #7892c2 100%); background:-webkit-linear-gradient(top, #476e9e 5%, #7892c2 100%); background:-o-linear-gradient(top, #476e9e 5%, #7892c2 100%); background:-ms-linear-gradient(top, #476e9e 5%, #7892c2 100%); background:linear-gradient(to bottom, #476e9e 5%, #7892c2 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#476e9e', endColorstr='#7892c2',GradientType=0); background-color:#476e9e; } .htmlevi2:active { position:relative; top:1px; }<button class="htmlevi2 onclick=" window.location.href="http://htmlevi.blogspot.com">TASARIM 2</button>

Tasarım 3

.htmlevi3 { -moz-box-shadow:inset 0px 0px 15px 3px #23395e; -webkit-box-shadow:inset 0px 0px 15px 3px #23395e; box-shadow:inset 0px 0px 15px 3px #23395e; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2e466e), color-stop(1, #415989)); background:-moz-linear-gradient(top, #2e466e 5%, #415989 100%); background:-webkit-linear-gradient(top, #2e466e 5%, #415989 100%); background:-o-linear-gradient(top, #2e466e 5%, #415989 100%); background:-ms-linear-gradient(top, #2e466e 5%, #415989 100%); background:linear-gradient(to bottom, #2e466e 5%, #415989 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2e466e', endColorstr='#415989',GradientType=0); background-color:#2e466e; -moz-border-radius:17px; -webkit-border-radius:17px; border-radius:17px; border:1px solid #1f2f47; display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:15px; padding:6px 13px; text-decoration:none; text-shadow:0px 1px 0px #263666; } .htmlevi3:hover { background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #415989), color-stop(1, #2e466e)); background:-moz-linear-gradient(top, #415989 5%, #2e466e 100%); background:-webkit-linear-gradient(top, #415989 5%, #2e466e 100%); background:-o-linear-gradient(top, #415989 5%, #2e466e 100%); background:-ms-linear-gradient(top, #415989 5%, #2e466e 100%); background:linear-gradient(to bottom, #415989 5%, #2e466e 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#415989', endColorstr='#2e466e',GradientType=0); background-color:#415989; } .htmlevi3:active { position:relative; top:1px; } <button class="htmlevi3 onclick=" window.location.href="http://htmlevi.blogspot.com">TASARIM 3</button>

Tasarım 4

.htmlevi4 { -moz-box-shadow:inset 0px 1px 0px 0px #cf866c; -webkit-box-shadow:inset 0px 1px 0px 0px #cf866c; box-shadow:inset 0px 1px 0px 0px #cf866c; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #d0451b), color-stop(1, #bc3315)); background:-moz-linear-gradient(top, #d0451b 5%, #bc3315 100%); background:-webkit-linear-gradient(top, #d0451b 5%, #bc3315 100%); background:-o-linear-gradient(top, #d0451b 5%, #bc3315 100%); background:-ms-linear-gradient(top, #d0451b 5%, #bc3315 100%); background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0451b', endColorstr='#bc3315',GradientType=0); background-color:#d0451b; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; border:1px solid #942911; display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:13px; padding:6px 24px; text-decoration:none; text-shadow:0px 1px 0px #854629; } .htmlevi4:hover { background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bc3315), color-stop(1, #d0451b)); background:-moz-linear-gradient(top, #bc3315 5%, #d0451b 100%); background:-webkit-linear-gradient(top, #bc3315 5%, #d0451b 100%); background:-o-linear-gradient(top, #bc3315 5%, #d0451b 100%); background:-ms-linear-gradient(top, #bc3315 5%, #d0451b 100%); background:linear-gradient(to bottom, #bc3315 5%, #d0451b 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bc3315', endColorstr='#d0451b',GradientType=0); background-color:#bc3315; } .htmlevi4:active { position:relative; top:1px; }<button class="htmlevi4 onclick=" window.location.href="http://htmlevi.blogspot.com">TASARIM 4</button>

Tasarım 5

.htmlevi5 { -moz-box-shadow: 0px 1px 0px 0px #f0f7fa; -webkit-box-shadow: 0px 1px 0px 0px #f0f7fa; box-shadow: 0px 1px 0px 0px #f0f7fa; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #33bdef), color-stop(1, #019ad2)); background:-moz-linear-gradient(top, #33bdef 5%, #019ad2 100%); background:-webkit-linear-gradient(top, #33bdef 5%, #019ad2 100%); background:-o-linear-gradient(top, #33bdef 5%, #019ad2 100%); background:-ms-linear-gradient(top, #33bdef 5%, #019ad2 100%); background:linear-gradient(to bottom, #33bdef 5%, #019ad2 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bdef', endColorstr='#019ad2',GradientType=0); background-color:#33bdef; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid #057fd0; display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:15px; font-weight:bold; padding:6px 24px; text-decoration:none; text-shadow:0px -1px 0px #5b6178; } .htmlevi5:hover { background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #019ad2), color-stop(1, #33bdef)); background:-moz-linear-gradient(top, #019ad2 5%, #33bdef 100%); background:-webkit-linear-gradient(top, #019ad2 5%, #33bdef 100%); background:-o-linear-gradient(top, #019ad2 5%, #33bdef 100%); background:-ms-linear-gradient(top, #019ad2 5%, #33bdef 100%); background:linear-gradient(to bottom, #019ad2 5%, #33bdef 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#019ad2', endColorstr='#33bdef',GradientType=0); background-color:#019ad2; } .htmlevi5:active { position:relative; top:1px; }<button class="htmlevi5 onclick=" window.location.href="http://htmlevi.blogspot.com">TASARIM 5</button>