Indo Created

Breaking News

Jumat, 10 November 2017

blog

Tombol CSS3 Jaringan Sosial Dengan Pink Girly Style

Dalam posting ini, saya akan mempresentasikan tentang ikon sosial dengan efek bubble untuk blogger Anda. Anda dapat terhubung dengan profil sosial Anda dengan tombol ini. Anda dapat memeriksa gadget media sosial sebelumnya dari tautan di bawah ini.

Media sosial

DEMO

1. Masuk ke akun blogger dan masuk ke Design >> Edit HTML

2. Temukan tag ini dengan menggunakan Ctrl F]]> </ b: skin>

3. Paste di bawah kode Sebelum ]]> </ b: skin> tag

/ * Bloggertrix * / 
.bubblewrap { 
list-style-type: none; 
margin: 0; 
padding: 0; 
} 

.bubblewrap li { 
display: inline; 
width: 65px; 
height: 60px; 
} 

.bubblewrap li img { 
width: 55px; . / * Lebar masing-masing gambar * / 
height: 60px; . / * Tinggi setiap gambar * / 
border: 0; 
margin-right: 12px; / * jarak antara setiap gambar * / 
-webkit-transisi: -webkit-transform 0.1s kemudahan-in; / * bernyawa mengubah properti * / 
-o-transisi: -o-transform 0.1s kemudahan-in; / * bernyawa mengubah properti di Opera * / 
} 

.bubblewrap li img: hover { 
-moz-transform: skala (1,8); / * meningkatkan citra 1.8x * / 
-webkit-transform: skala (1,8);
-o-transform: skala (1,8); 
}

4. Pergi ke blogger Desain > Elemen Halaman.

5. Klik Add Gadget dan pilih 'HTML / Javascript

6. Paste kode di bawah ini.

<center> 
<ul class = "bubblewrap"> 
<li> <a href="http://www.stumbleupon.com/stumbler/soharox/"> <img src = "http: //1.bp.blogspot. com / -895943oNv3Y / UEzCpIO30ZI / AAAAAAAADrA / I237B0gig_4 / S1600 / bloggertrix.com-StumbleUpon.png "title = "Tambahkan ke Stumbleupon"/> </a> </ li> 
<li> <a href =" https: // www.facebook.com/bloggertrix"><img src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZmrbu0t2Tx_FbIub76RGZ1Jw1W6ifC1eYTyXFCh8uHH9ab1Rd6L5NpUd0gjtJ39Ghavukwc04NecQF0eWPeM4qr_TSXZ90430WYWIcVE9GAzjoFj7858vKNcE8MkjYyGTzhqLqoE-PKo/s1600/bloggertrix.com-Facebook.png" title = "Tambahkan ke Facebook "/> </a> </ li> 
<li> <a href="http://www.digg.com/"> <img src =" http://3.bp.blogspot.com/- Bp7wbvOSk7o / UEzClYkWSrI / AAAAAAAADqo / VPWqyaJadw8 / S1600 / bloggertrix.com-Digg.png "title ="Tambahkan ke Digg"/> </a> </ li>
<li><a href="http://www.twitter/bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU3shiBHBnDKKw1aCn6aEZpywzWd56B89dlZa1oJOhTRnaLckyXsvaQKWWfZwZ51RfIA95zdG9NhDX3zjRnVVe18Tq_X-qEGmAU-f9UTsGqZd8ZGmlAC6jUDNlHKbps5-sPA9UHpV_zLA/s1600/bloggertrix.com-Twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBiJaSWqrKC5L5gsyMVnX4zY9ZTJtTa0qlgvxyvdZcuZbIiXiZuIZBiOAQDDvKa0cEL8_3j1hDuch3vnJXAjjsVMExPErWf3pJYDl8JVkoPlglW6QyK2F5V3zREsZuVYJiDSz-FYFM8NU/s1600/bloggertrix.com-RSS.png" title="Add RSS Feed" /></a></li>
</ul>
</center>

Ganti dengan link Anda.

7. Sekarang simpan Anda HTML / Javascript'.
Kamu selesai...

Widget Twitter Untuk Blogger

Twitter juga situs sosial populer di dunia.Jika menempatkan twitter widget untuk blogger kita mudah untuk meningkatkan pembaca Jadi blog Anda akan menjadi popular.Try alat ini.

Tweet me Tombol

Widget ini lebih powerful.Its memungkinkan pengguna untuk
berbagi posting Anda easily.It menghitung

Tweeter

twitter tombol lain untuk blogger Anda.

Re Tweet Tombol

Hal ini juga mirip dengan Tweet saya button.Its berubah warna.

Tweet Kontra

Ini juga widget yang baik untuk blogger.it waktu nomor count Anda telah tweeted
Anda dapat melakukan lebih customize.It dapat mengubah warna, perbatasan, dll

Twitter Kontra

Widget ini menunjukkan berapa banyak orang yang mengikuti Anda di twitter.

Tweet Stamp

Widget ini menunjukkan tweet.Have terbaru Anda lebih menyesuaikan.

Tweet Jarak jauh

Widget ini acara yang pengguna twitter mengunjungi baru-baru blogger Anda.

Chris' Twitter Badge Asli

Ini adalah manis mencari Twitter lencana . beban dalam waktu singkat diciptakan oleh cheris

Twit Twoo

This widget display twitter status.
Twitter Tag
ini otomatis gambar pembaruan twitter untuk blogger.

Twitter Gif

Buat Twitter lencana untuk blogger Anda

Twitter Profil

Ini lingkaran widget melalui tweets.It Anda memiliki lebih banyak kustomisasi.

Menambahkan Twitter Untuk MySpace

Ini adalah Gadget twitter untuk myspace

Twit Sig Badge

Ini khusus menampilkan pembaruan booger Anda .

Pergi Untuk lencana Web

Gadget ini membantu untuk mengarahkan pembaca ke halaman twitter Anda ketika diklik.

Tweet Gadget

Ini adalah menunjukkan update terakhir Anda di blogger Anda.

Twitterati lencana

Gadget ini menunjukkan teman-teman twitter Anda.

Tweet Snap

Ini membuat gambar untuk untuk akun twitter Anda dan akan menampilkan tweet yang terbaru.

Selamat mencoba ... !!!!!!!!!

Rabu, 10 Februari 2016

CSS3 Button Collection With Different Hover Effects

Awesome Css3 button collection for your blog.

Check all buttons from bloggertrix.com

CSS3 buttons collection

Demo

CSS3 BUtton Hover Effects COllaection

1. Go to Blogger Dashboard > Template
2. Find ]]></b:skin>
3. Paste below code just below it.

/*== Button hover css ==*/
button{border: 0; font-family: "Open Sans"; font-weight: 600; padding: 8px 12px; width: 120px; color: #fff; border-radius: 5px; background-color: #DB733B; cursor: pointer; position: relative; z-index: 1;}
.b1:before{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; left: 0; bottom: 0; transition:.4s; z-index: -1;}
.b1:hover:before{height: 100%; bottom: auto; top: 0;}

.b2:before{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; left: 0; top: 0; transition:.4s; z-index: -1;}
.b2:hover:before{height: 100%; top: auto; bottom: 0;}

.b3:before{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; right: 0; top: 0; transition:.4s; z-index: -1;}
.b3:hover:before{width: 100%; right: auto; left: 0;}

.b4:before{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; left: 0; top: 0; transition:.4s; z-index: -1;}
.b4:hover:before{width: 100%; left: auto; right: 0;}

.b5:before{content: ""; width: 0; height: 0; position: absolute; background-color: #3395D0; right: 0; bottom: 0; transition:.4s; z-index: -1;}
.b5:hover:before{width: 100%; height: 100%; right: auto; left: 0; bottom: auto; top: 0;}

.b6:before{content: ""; width: 0; height: 0; position: absolute; background-color: #3395D0; left: 0; top: 0; transition:.4s; z-index: -1;}
.b6:hover:before{width: 100%; height: 100%; left: auto; right: 0; top: auto; bottom: 0;}

.b7:before{content: ""; width: 0; height: 0; position: absolute; background-color: #3395D0; left: 50%; bottom: 50%; transition:.4s; z-index: -1;}
.b7:hover:before{width: 100%; height: 100%; left: 0; bottom: 0;}

.b8:before{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; left: 0; top: 0; transition:.4s; z-index: -1;}
.b8:after{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; right: 0; top: 0; transition:.4s; z-index: -1;}
.b8:hover:before, .b8:hover:after{width: 50%;}

.b9:before{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; left: 50%; top: 0; transition:.3s; z-index: -1;}
.b9:after{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; right: 50%; top: 0; transition:.3s; z-index: -1;}
.b9:hover:before, .b9:hover:after{width: 50%;}
.b9:hover:before{left: 0;}
.b9:hover:after{right: 0;}

.b10:before{content: ""; width: 0; height: 0; position: absolute; background-color: #3395D0; left: 0; top: 0; transition:.4s; z-index: -1;}
.b10:after{content: ""; width: 0; height: 0; position: absolute; background-color: #3395D0; right: 0; bottom: 0; transition:.4s; z-index: -1;}
.b10:hover:before, .b10:hover:after{width: 50%; height: 100%;}

.b11:before{content: ""; width: 0; height: 0; position: absolute; background-color: #3395D0; left: 0; bottom: 0; transition:.4s; z-index: -1;}
.b11:after{content: ""; width: 0; height: 0; position: absolute; background-color: #3395D0; right: 0; top: 0; transition:.4s; z-index: -1;}
.b11:hover:before, .b11:hover:after{width: 50%; height: 100%;}

.b12:before{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; left: 0; bottom: 0; transition:.4s; z-index: -1;}
.b12:after{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; right: 0; top: 0; transition:.4s; z-index: -1;}
.b12:hover:before, .b12:hover:after{height: 50%;}

.b13:before{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; left: 0; bottom: 50%; transition:.3s; z-index: -1;}
.b13:after{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; right: 0; top: 50%; transition:.3s; z-index: -1;}
.b13:hover:before, .b13:hover:after{height: 50%;}
.b13:hover:before{bottom: 0;}
.b13:hover:after{top: 0;}

/*= button hover with text =*/
.withText button{height: 39px; overflow: hidden;}
button span{display: block; position: relative; transition:.35s;}

.bt1 .after{top: -45px;}
.bt1 .before{top: 0;}
.bt1:hover .before{top: 45px;}
.bt1:hover .after{top: -18px;}
.bt1:before{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; left: 0; top: 0; transition:.4s; z-index: -1;}
.bt1:hover:before{height: 100%;}

.bt2 .after{bottom: -10px;}
.bt2 .before{bottom: 0;}
.bt2:hover .before{bottom: 45px;}
.bt2:hover .after{bottom: 18px;}
.bt2:before{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; left: 0; bottom: 0; transition:.4s; z-index: -1;}
.bt2:hover:before{height: 100%;}

.bt3 .after{left: -90px; top: -18px;}
.bt3 .before{right: 0;}
.bt3:hover .before{right: -90px;}
.bt3:hover .after{left: 0;}
.bt3:before{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; left: 0; bottom: 0; transition:.4s; z-index: -1;}
.bt3:hover:before{width: 100%;}

.bt4 .after{right: -90px; top: -18px;}
.bt4 .before{left: 0;}
.bt4:hover .before{left: -90px;}
.bt4:hover .after{right: 0;}
.bt4:before{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; right: 0; bottom: 0; transition:.4s; z-index: -1;}
.bt4:hover:before{width: 100%;}

.bt5 .after{top: -45px; z-index: 9;}
.bt5 .before{top: 0;}
.bt5:hover .before{top: -45px;}
.bt5:hover .after{top: -18px;}
.bt5:before{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; left: 0; top: 0; transition:.4s; z-index: 1;}
.bt5:hover:before{height: 100%;}

.bt6 .after{bottom: -10px; z-index: 9;}
.bt6 .before{bottom: 0;}
.bt6:hover .before{bottom: -45px;}
.bt6:hover .after{bottom: 18px;}
.bt6:before{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; left: 0; bottom: 0; transition:.4s; z-index: 1;}
.bt6:hover:before{height: 100%;}

.bt7 .after{left: -90px; top: -18px; z-index: 9;}
.bt7 .before{right: 0;}
.bt7:hover .before{right: 90px;}
.bt7:hover .after{left: 0;}
.bt7:before{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; left: 0; bottom: 0; transition:.4s; z-index: 1;}
.bt7:hover:before{width: 100%;}

.bt8 .after{right: -90px; top: -18px; z-index: 9;}
.bt8 .before{left: 0;}
.bt8:hover .before{left: 90px;}
.bt8:hover .after{right: 0;}
.bt8:before{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; right: 0; bottom: 0; transition:.4s; z-index: 1;}
.bt8:hover:before{width: 100%;}

.bt9 .after{top: -45px;}
.bt9 .before{top: 0;}
.bt9:hover .before{top: 45px;}
.bt9:hover .after{top: -18px;}
.bt9:hover{background-color: #3395D0; transition:.4s;}

.bt10 .after{bottom: -10px;}
.bt10 .before{bottom: 0;}
.bt10:hover .before{bottom: 45px;}
.bt10:hover .after{bottom: 18px;}
.bt10:hover{background-color: #3395D0; transition:.4s;}

.bt11 .after{left: -90px; top: -18px;}
.bt11 .before{right: 0;}
.bt11:hover .before{right: -90px;}
.bt11:hover .after{left: 0;}
.bt11:hover{background-color: #3395D0; transition:.4s;}

.bt12 .after{right: -90px; top: -18px;}
.bt12 .before{left: 0;}
.bt12:hover .before{left: -90px;}
.bt12:hover .after{right: 0;}
.bt12:hover{background-color: #3395D0; transition:.4s;}

.bt13 .after{top: -45px; z-index: 9;}
.bt13 .before{top: 0;}
.bt13:hover .before{top: -45px;}
.bt13:hover .after{top: -18px;}
.bt13:hover{background-color: #3395D0; transition:.4s;}

.bt14 .after{bottom: -10px; z-index: 9;}
.bt14 .before{bottom: 0;}
.bt14:hover .before{bottom: -45px;}
.bt14:hover .after{bottom: 18px;}
.bt14:hover{background-color: #3395D0; transition:.4s;}

.bt15 .after{left: -90px; top: -18px; z-index: 9;}
.bt15 .before{right: 0;}
.bt15:hover .before{right: 90px;}
.bt15:hover .after{left: 0;}
.bt15:hover{background-color: #3395D0; transition:.4s;}

.bt16 .after{right: -90px; top: -18px; z-index: 9;}
.bt16 .before{left: 0;}
.bt16:hover .before{left: 90px;}
.bt16:hover .after{right: 0;}
.bt16:hover{background-color: #3395D0; transition:.4s;}
/*== Button hover css end ==*/

4. Now save your Template and get HTML Codes from below link

HTML Codes for every CSS3 buttons

Now get your HTML code from below link for each buttons.
credits: http://tympanus.net/codrops/

Author Bio: Sohan Jayasinghe is the owner and author of Bloggertrix.com .He has been blogging since 2009 and writing Blogger trix since 2010.If you want to contact him, Just leave a message via contact us page or connect with facebook or twitter

Sabtu, 16 Februari 2013

CSS3 Circle Effect Buttons Style For Blogger

In this post, im explain, how to add awesome animation button to your blog.I'm using CSS and HTML for this tutorial.You can check, demo page by below link. This is easy to add to bloggers. Earlier buttons articles

Demo

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.

5.Find this code by using Ctrl+F ]]></b:skin>

6. Paste below code Before ]]></b:skin> code

.a-btn{
    width:60px;
    height:60px;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    display:block;
    margin:20px;
    float:left;
    background:#f0ad4e;
    position:relative;
    -webkit-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff,  0px 0px 1px 8px rgba(188, 188, 188, 0.4), 0px 0px 0px 9px #fff;
    -moz-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff,  0px 0px 1px 8px rgba(188, 188, 188, 0.4), 0px 0px 0px 9px #fff;
    box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff,  0px 0px 1px 8px rgba(188, 188, 188, 0.4), 0px 0px 0px 9px #fff;
    -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    transition:all 0.3s linear;
}
.a-btn span{
    display:table-cell;
    width:40px;
    height:40px;
    padding:10px;
    text-align:center;
    vertical-align:middle;
    font-size:16px;
    color:#fff;
    text-shadow:0px 1px 1px #A03F16;
    font-family:"Arvo", "Myriad Pro", "Trebuchet MS", sans-serif;
    -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    transition:all 0.3s linear;
}
.a-btn span:nth-child(1), 
.a-btn span:nth-child(3){
    position:absolute;
    top:0px;
    left:0px;
    font-size:16px;
    line-height:19px;
    opacity:0;
}
.a-btn span:nth-child(1){
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJojX7xC2ggDrE9PP6f0TPMxj7ytY7L6BCnVMgItm5Ivm1gyoF7gaXqze4B6G8bsD8EGsEbotd2kRZznZ9TomaAFtvrZtl8DSoat7Hami2MGhSjme-MgJ3M9rOx-cjkXA95fgEMBuU1dM/s1600/star.png) no-repeat center center;
    opacity:0.2;
}
.a-btn:hover{
    background:rgba(170, 77, 27, 0.6);
    -webkit-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff,  1px 4px 5px 8px rgba(188, 188, 188, 0.6), 0px 0px 0px 9px #fff;
    -moz-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff,  1px 4px 5px 8px rgba(188, 188, 188, 0.6), 0px 0px 0px 9px #fff;
    box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff,  1px 4px 5px 8px rgba(188, 188, 188, 0.6), 0px 0px 0px 9px #fff;
}
.a-btn:hover span:nth-child(3){
    opacity:1;
}
.a-btn:hover span:nth-child(2){
    opacity: 0; 
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    transform: scale(0);
}
.a-btn:hover span:nth-child(1){
    -webkit-animation:rotate 1s linear;
    -moz-animation:rotate 1s linear;
    animation:rotate 1s linear;
}
.a-btn:active{
    -webkit-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff,  0px -1px 0px 8px rgba(188, 188, 188, 0.3), 0px 0px 0px 10px #fff;
    -moz-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff,  0px -1px 0px 8px rgba(188, 188, 188, 0.3), 0px 0px 0px 10px #fff;
    box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff,  0px -1px 0px 8px rgba(188, 188, 188, 0.3), 0px 0px 0px 10px #fff;
}
.a-btn:active span:nth-child(2){
    color:rgba(170, 77, 27, 0.8);
    text-shadow:0px 1px 1px rgba(255, 255, 255, 0.6);
}
@keyframes rotate{
    0% { transform: scale(1) rotate(0);}
    50% { transform: scale(0.5) rotate(180deg);}
    100% { transform: scale(1) rotate(360deg);}
}
@-webkit-keyframes rotate{
    0% { -webkit-transform: scale(1) rotate(0);}
    50% { -webkit-transform: scale(0.5) rotate(180deg);}
    100% { -webkit-transform: scale(1) rotate(360deg);}
}
@-moz-keyframes rotate{
    0% { -moz-transform: scale(1) rotate(0);}
    50% { -moz-transform: scale(0.5) rotate(180deg);}
    100% { -moz-transform: scale(1) rotate(360deg);}
}

7. Go to blogger and click drop-down like 1st step and select Layout

8. Click Add Gadget and select 'HTML/Javascript"

9. Paste below code.

<div class="button-wrapper">

<a href="#" class="a-btn"><span></span>
<span>Sign up</span>
<span>It's free!</span></a>

<a href="#" class="a-btn"><span></span>
<span>Join Now</span>  
<span>It's free!</span></a>

<a href="#" class="a-btn"><span></span>
<span>Enter</span> 
<span>It's free!</span></a>

<a href="#" class="a-btn">
<span></span>
<span>Get in</span>
<span>It's free!</span></a>
</div>

*Replace Button URL

10. Now save your template. You are done.

Senin, 10 Desember 2012

Animated Css3 Blogger Buttons With Nice Image Effect

In this tutorial im gonna explain how to addnice Css3 buttons with image hover effect. you can use it for any buttons. specially for sale items.you can change image as your like. Im using Css3 and HTML for these buttons. Tutorial You can check my Earlier buttons
articles here

DEMO

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.

5.Find this code by using Ctrl+F ]]></b:skin>

6. Paste below code Before ]]></b:skin> code

.a-btn{
    background:#a9db80;
    background:-webkit-gradient(linear,left top,left bottom,color-stop(#a9db80,0),color-stop(#96c56f,1));
    background:-webkit-linear-gradient(top, #a9db80 0%, #96c56f 100%);
    background:-moz-linear-gradient(top, #a9db80 0%, #96c56f 100%);
    background:-o-linear-gradient(top, #a9db80 0%, #96c56f 100%);
    background:linear-gradient(top, #a9db80 0%, #96c56f 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9db80', endColorstr='#96c56f',GradientType=0 );
    padding-left:90px;
    padding-right:105px;
    height:65px;
    display:inline-block;
    position:relative;
    border:1px solid #80ab5d;
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    float:left;
    clear:both;
    margin:10px 0px;
    overflow:hidden;
    -webkit-transition:box-shadow 0.3s ease-in-out;
    -moz-transition:box-shadow 0.3s ease-in-out;
    -o-transition:box-shadow 0.3s ease-in-out;
    transition:box-shadow 0.3s ease-in-out;
}
.a-btn img{
    position:absolute;
    left:15px;
    top:13px;
    border:none;
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
.a-btn .a-btn-slide-text{
    position:absolute;
    font-size:36px;
    top:18px;
    left:18px;
    color:#6d954e;
    opacity:0;
    text-shadow:0px 1px 1px rgba(255,255,255,0.4);
    -webkit-transition:opacity 0.2s ease-in-out;
    -moz-transition:opacity 0.2s ease-in-out;
    -o-transition:opacity 0.2s ease-in-out;
    transition:opacity 0.2s ease-in-out;
}
.a-btn-text{
    padding-top:5px;
    display:block;
    font-size:30px;
    text-shadow:0px -1px 1px #80ab5d;
}
.a-btn-text small{
    display:block;
    font-size:11px;
    letter-spacing:1px;
}
.a-btn-icon-right{
    position:absolute;
    right:0px;
    top:0px;
    height:100%;
    width:80px;
    border-left:1px solid #80ab5d;
    -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
    -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
    box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-icon-right span{
    width:38px;
    height:38px;
    opacity:0.7;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    border-radius:20px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-20px 0px 0px -20px;
    border:1px solid rgba(0,0,0,0.5);
    background:#4e5c50 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizkYp_fKZaGtt-ReY83eFrVx0ihBOf-dLPHLkj4tRetPgtKhfXaiND4v0M3uCsJNIWr61dsyBP-V1_XyRusQGRpRqN9m72xSQQZaM4kPmp6qqBnbfL0YzD8RTSjLHWSR2jhSIOkZuz2piB/s1600/arrow_down_black.png) no-repeat center center;
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
    box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
.a-btn:hover{
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
}

.a-btn img{ margin-top:-15px;}

.a-btn:hover img{
    -webkit-transform:scale(10);
    -moz-transform:scale(10);
    -ms-transform:scale(10);
    -o-transform:scale(10);
    transform:scale(10);
    opacity:0;
}
.a-btn:hover .a-btn-slide-text,
.a-btn:hover .a-btn-icon-right span{
    opacity:1;
}
.a-btn:active{
    position:relative;
    top:1px;
    background:#80ab5d;
    -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    border-color:#a9db80;
}
.a-btn:active .a-btn-icon-right span{
    -webkit-transform:scale(1.4);
    -moz-transform:scale(1.4);
    -ms-transform:scale(1.4);
    -o-transform:scale(1.4);
    transform:scale(1.4);
}

7. Go to blogger and click drop-down like 1st step and select Layout

8. Click Add Gadget and select 'HTML/Javascript"

9. Paste below code.


<div class="content">
                <div class="button-wrapper">
                    <a href="#" class="a-btn">
                        <span class="a-btn-slide-text">$9</span>
                        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2RKBsyqEOlBxTXWf1_5CZwfmInqSXFMPU2N7wfw4DWLeqKMXVvtedl03O6u3xiLQDo3OBCHYw87ivmEz46C0-6Qto9kG98lgUhGj_VHfiUSN7eMmsRche8BEntYwO4lKP5iGcLOJEhePh/s1600/1.png" alt="Photos" />
                        <span class="a-btn-text"><small>Available on the Apple</small> App Store</span> 
                        <span class="a-btn-icon-right"><span></span></span>
                    </a>
                    <a href="#" class="a-btn">
                        <span class="a-btn-slide-text">$75</span>
                        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJWBftX5cKwTQUSgQm45FF0VS8HmiXieARA85b1JoAV0uJkUav5f_OKutTWEcWyls775vgpLYJ0T3IxCRnoye40GIakNA_-XSPY7HWjIYmPCg4Zxro0lj96z8peJzjg6VSjj1ma9-D_Ch0/s1600/2.png" alt="Maps" />
                        <span class="a-btn-text"><small>Available on the Apple</small> App Store</span> 
                        <span class="a-btn-icon-right"><span></span></span>
                    </a>
                    <a href="#" class="a-btn">
                        <span class="a-btn-slide-text">$25</span>
                        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX3_PwPePB4eDHwe3EQ3O6R5x7z5sLj97loEIl7e0dLBbXSgBniScLpEus9LZZkWjePwQexEuscqJ4UvjPD6zzbxM1carehmcf1_NAuCwYyX7xw3z_HsSZ6IhWDC_Aq3fhvCsMdrhRAgZn/s1600/3.png" alt="Settings" />
                        <span class="a-btn-text"><small>Available on the Apple</small> App Store</span> 
                        <span class="a-btn-icon-right"><span></span></span>
                    </a>
                    <a href="#" class="a-btn">
                        <span class="a-btn-slide-text">$100</span>
                        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFfSGz0BO7HGkYcNoN-de_Uri2hmmo3MRrldIZBwQCt4CN3er6NkFNRYDhU1hAanRnO6jVa5lnTdKwoMldwx5s2AgfX2J6J4jlKqoK4H-qHK-NjOtB-xJlqZS7ugxC61K0BlG9ch1Zazga/s1600/4.png" alt="Wireless" />
                        <span class="a-btn-text"><small>Available on the Apple</small> Download</span> 
                        <span class="a-btn-icon-right"><span></span></span>
                    </a>
                </div>
            </div>

*Replace # with button Button URL

10. Now save your template. You are done.

Jumat, 16 November 2012

Add Attractive Animated CSS Buttons For Blogger

Today im gonna explain how to add css3 stylish animated buttons for your blogger. you can use
this buttons as download buttons, demo buttons, redirect to other page and etc.Im using CSS and
HTML for this. you can use this button code in to your blogger post too.Check my earlier post about
Button codes here.

Demo

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.

5. Find this tag by using Ctrl+F ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

.button{
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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYF8Mp-jCPqEGyz7uEWhGQkBcR4bLuXGBWdVa0GGgCcmGKksLmBqqM4nXG5zAHSxMVbvRZO_ISrz7wACdUiPP89DTG5QsfubcFR0IQ_s1JcrM93vaJaZU1l27VB0p7Inq0Fdm017NSPqi/s144/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;
}
.button:hover{
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}
.button:active{
bottom:-1px;
}
/* The three buttons sizes */
.button.big { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}
/* BlueButton */
.blue.button{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;
background-color: #48b5f2;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYF8Mp-jCPqEGyz7uEWhGQkBcR4bLuXGBWdVa0GGgCcmGKksLmBqqM4nXG5zAHSxMVbvRZO_ISrz7wACdUiPP89DTG5QsfubcFR0IQ_s1JcrM93vaJaZU1l27VB0p7Inq0Fdm017NSPqi/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYF8Mp-jCPqEGyz7uEWhGQkBcR4bLuXGBWdVa0GGgCcmGKksLmBqqM4nXG5zAHSxMVbvRZO_ISrz7wACdUiPP89DTG5QsfubcFR0IQ_s1JcrM93vaJaZU1l27VB0p7Inq0Fdm017NSPqi/s144/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYF8Mp-jCPqEGyz7uEWhGQkBcR4bLuXGBWdVa0GGgCcmGKksLmBqqM4nXG5zAHSxMVbvRZO_ISrz7wACdUiPP89DTG5QsfubcFR0IQ_s1JcrM93vaJaZU1l27VB0p7Inq0Fdm017NSPqi/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYF8Mp-jCPqEGyz7uEWhGQkBcR4bLuXGBWdVa0GGgCcmGKksLmBqqM4nXG5zAHSxMVbvRZO_ISrz7wACdUiPP89DTG5QsfubcFR0IQ_s1JcrM93vaJaZU1l27VB0p7Inq0Fdm017NSPqi/s144/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));
}
.blue.button:hover{
background-color:#63c7fe;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYF8Mp-jCPqEGyz7uEWhGQkBcR4bLuXGBWdVa0GGgCcmGKksLmBqqM4nXG5zAHSxMVbvRZO_ISrz7wACdUiPP89DTG5QsfubcFR0IQ_s1JcrM93vaJaZU1l27VB0p7Inq0Fdm017NSPqi/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYF8Mp-jCPqEGyz7uEWhGQkBcR4bLuXGBWdVa0GGgCcmGKksLmBqqM4nXG5zAHSxMVbvRZO_ISrz7wACdUiPP89DTG5QsfubcFR0IQ_s1JcrM93vaJaZU1l27VB0p7Inq0Fdm017NSPqi/s144/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYF8Mp-jCPqEGyz7uEWhGQkBcR4bLuXGBWdVa0GGgCcmGKksLmBqqM4nXG5zAHSxMVbvRZO_ISrz7wACdUiPP89DTG5QsfubcFR0IQ_s1JcrM93vaJaZU1l27VB0p7Inq0Fdm017NSPqi/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYF8Mp-jCPqEGyz7uEWhGQkBcR4bLuXGBWdVa0GGgCcmGKksLmBqqM4nXG5zAHSxMVbvRZO_ISrz7wACdUiPP89DTG5QsfubcFR0IQ_s1JcrM93vaJaZU1l27VB0p7Inq0Fdm017NSPqi/s144/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 */
.green.button{
color:#345903 !important;
border:1px solid #96a37b !important;
background-color: #79be1e;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYF8Mp-jCPqEGyz7uEWhGQkBcR4bLuXGBWdVa0GGgCcmGKksLmBqqM4nXG5zAHSxMVbvRZO_ISrz7wACdUiPP89DTG5QsfubcFR0IQ_s1JcrM93vaJaZU1l27VB0p7Inq0Fdm017NSPqi/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYF8Mp-jCPqEGyz7uEWhGQkBcR4bLuXGBWdVa0GGgCcmGKksLmBqqM4nXG5zAHSxMVbvRZO_ISrz7wACdUiPP89DTG5QsfubcFR0IQ_s1JcrM93vaJaZU1l27VB0p7Inq0Fdm017NSPqi/s144/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYF8Mp-jCPqEGyz7uEWhGQkBcR4bLuXGBWdVa0GGgCcmGKksLmBqqM4nXG5zAHSxMVbvRZO_ISrz7wACdUiPP89DTG5QsfubcFR0IQ_s1JcrM93vaJaZU1l27VB0p7Inq0Fdm017NSPqi/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYF8Mp-jCPqEGyz7uEWhGQkBcR4bLuXGBWdVa0GGgCcmGKksLmBqqM4nXG5zAHSxMVbvRZO_ISrz7wACdUiPP89DTG5QsfubcFR0IQ_s1JcrM93vaJaZU1l27VB0p7Inq0Fdm017NSPqi/s144/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));
}
.green.button:hover{
background-color:#89d228;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYF8Mp-jCPqEGyz7uEWhGQkBcR4bLuXGBWdVa0GGgCcmGKksLmBqqM4nXG5zAHSxMVbvRZO_ISrz7wACdUiPP89DTG5QsfubcFR0IQ_s1JcrM93vaJaZU1l27VB0p7Inq0Fdm017NSPqi/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYF8Mp-jCPqEGyz7uEWhGQkBcR4bLuXGBWdVa0GGgCcmGKksLmBqqM4nXG5zAHSxMVbvRZO_ISrz7wACdUiPP89DTG5QsfubcFR0IQ_s1JcrM93vaJaZU1l27VB0p7Inq0Fdm017NSPqi/s144/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYF8Mp-jCPqEGyz7uEWhGQkBcR4bLuXGBWdVa0GGgCcmGKksLmBqqM4nXG5zAHSxMVbvRZO_ISrz7wACdUiPP89DTG5QsfubcFR0IQ_s1JcrM93vaJaZU1l27VB0p7Inq0Fdm017NSPqi/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYF8Mp-jCPqEGyz7uEWhGQkBcR4bLuXGBWdVa0GGgCcmGKksLmBqqM4nXG5zAHSxMVbvRZO_ISrz7wACdUiPP89DTG5QsfubcFR0IQ_s1JcrM93vaJaZU1l27VB0p7Inq0Fdm017NSPqi/s144/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 */
.orange.button{
color:#693e0a !important;
border:1px solid #bea280 !important;
background-color: #e38d27;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYF8Mp-jCPqEGyz7uEWhGQkBcR4bLuXGBWdVa0GGgCcmGKksLmBqqM4nXG5zAHSxMVbvRZO_ISrz7wACdUiPP89DTG5QsfubcFR0IQ_s1JcrM93vaJaZU1l27VB0p7Inq0Fdm017NSPqi/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYF8Mp-jCPqEGyz7uEWhGQkBcR4bLuXGBWdVa0GGgCcmGKksLmBqqM4nXG5zAHSxMVbvRZO_ISrz7wACdUiPP89DTG5QsfubcFR0IQ_s1JcrM93vaJaZU1l27VB0p7Inq0Fdm017NSPqi/s144/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYF8Mp-jCPqEGyz7uEWhGQkBcR4bLuXGBWdVa0GGgCcmGKksLmBqqM4nXG5zAHSxMVbvRZO_ISrz7wACdUiPP89DTG5QsfubcFR0IQ_s1JcrM93vaJaZU1l27VB0p7Inq0Fdm017NSPqi/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYF8Mp-jCPqEGyz7uEWhGQkBcR4bLuXGBWdVa0GGgCcmGKksLmBqqM4nXG5zAHSxMVbvRZO_ISrz7wACdUiPP89DTG5QsfubcFR0IQ_s1JcrM93vaJaZU1l27VB0p7Inq0Fdm017NSPqi/s144/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));
}
.orange.button:hover{
background-color:#ec9732;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYF8Mp-jCPqEGyz7uEWhGQkBcR4bLuXGBWdVa0GGgCcmGKksLmBqqM4nXG5zAHSxMVbvRZO_ISrz7wACdUiPP89DTG5QsfubcFR0IQ_s1JcrM93vaJaZU1l27VB0p7Inq0Fdm017NSPqi/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYF8Mp-jCPqEGyz7uEWhGQkBcR4bLuXGBWdVa0GGgCcmGKksLmBqqM4nXG5zAHSxMVbvRZO_ISrz7wACdUiPP89DTG5QsfubcFR0IQ_s1JcrM93vaJaZU1l27VB0p7Inq0Fdm017NSPqi/s144/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYF8Mp-jCPqEGyz7uEWhGQkBcR4bLuXGBWdVa0GGgCcmGKksLmBqqM4nXG5zAHSxMVbvRZO_ISrz7wACdUiPP89DTG5QsfubcFR0IQ_s1JcrM93vaJaZU1l27VB0p7Inq0Fdm017NSPqi/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYF8Mp-jCPqEGyz7uEWhGQkBcR4bLuXGBWdVa0GGgCcmGKksLmBqqM4nXG5zAHSxMVbvRZO_ISrz7wACdUiPP89DTG5QsfubcFR0IQ_s1JcrM93vaJaZU1l27VB0p7Inq0Fdm017NSPqi/s144/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 */
.gray.button{
color:#525252 !important;
border:1px solid #a5a5a5 !important;
background-color: #a9adb1;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYF8Mp-jCPqEGyz7uEWhGQkBcR4bLuXGBWdVa0GGgCcmGKksLmBqqM4nXG5zAHSxMVbvRZO_ISrz7wACdUiPP89DTG5QsfubcFR0IQ_s1JcrM93vaJaZU1l27VB0p7Inq0Fdm017NSPqi/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYF8Mp-jCPqEGyz7uEWhGQkBcR4bLuXGBWdVa0GGgCcmGKksLmBqqM4nXG5zAHSxMVbvRZO_ISrz7wACdUiPP89DTG5QsfubcFR0IQ_s1JcrM93vaJaZU1l27VB0p7Inq0Fdm017NSPqi/s144/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYF8Mp-jCPqEGyz7uEWhGQkBcR4bLuXGBWdVa0GGgCcmGKksLmBqqM4nXG5zAHSxMVbvRZO_ISrz7wACdUiPP89DTG5QsfubcFR0IQ_s1JcrM93vaJaZU1l27VB0p7Inq0Fdm017NSPqi/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYF8Mp-jCPqEGyz7uEWhGQkBcR4bLuXGBWdVa0GGgCcmGKksLmBqqM4nXG5zAHSxMVbvRZO_ISrz7wACdUiPP89DTG5QsfubcFR0IQ_s1JcrM93vaJaZU1l27VB0p7Inq0Fdm017NSPqi/s144/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));
}
.gray.button:hover{
background-color:#b6bbc0;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYF8Mp-jCPqEGyz7uEWhGQkBcR4bLuXGBWdVa0GGgCcmGKksLmBqqM4nXG5zAHSxMVbvRZO_ISrz7wACdUiPP89DTG5QsfubcFR0IQ_s1JcrM93vaJaZU1l27VB0p7Inq0Fdm017NSPqi/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYF8Mp-jCPqEGyz7uEWhGQkBcR4bLuXGBWdVa0GGgCcmGKksLmBqqM4nXG5zAHSxMVbvRZO_ISrz7wACdUiPP89DTG5QsfubcFR0IQ_s1JcrM93vaJaZU1l27VB0p7Inq0Fdm017NSPqi/s144/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYF8Mp-jCPqEGyz7uEWhGQkBcR4bLuXGBWdVa0GGgCcmGKksLmBqqM4nXG5zAHSxMVbvRZO_ISrz7wACdUiPP89DTG5QsfubcFR0IQ_s1JcrM93vaJaZU1l27VB0p7Inq0Fdm017NSPqi/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYF8Mp-jCPqEGyz7uEWhGQkBcR4bLuXGBWdVa0GGgCcmGKksLmBqqM4nXG5zAHSxMVbvRZO_ISrz7wACdUiPP89DTG5QsfubcFR0IQ_s1JcrM93vaJaZU1l27VB0p7Inq0Fdm017NSPqi/s144/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));
}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

(You can use this code anywhere in your post.)

<a class="button big blue" href="Your Link" target="_blank">Live Demo</a>

<a class="button big orange" href="Your Link" target="_blank">Live Demo</a>

<a class="button big green" href="Your Link" target="_blank">Live Demo</a>

<a class="button big gray" href="Your Link" target="_blank">Live Demo</a>

Replace with your links.

10. Now save your HTML/Javascript'.

You are done...