Beautiful CSS Buttons For Your Blogger Blog

Today in this tutorial I'm going to tell you about beautiful CSS button with mouse hover effect for your blogger blog. These buttons are made from pure CSS and on mouse hover you will see bubbles effect. So according to me its beautiful creation and each button has different color. You can use these buttons as a demo, download or whatever you want. You can also change the text to display with your text.

You May Like To Read:

1. Add A Share Buttons To Blogger Sidebar
2. Create Email Subscription Form With Social Buttons
3. Hand Drawn Social Media Buttons For Your Blogger Blog

Wanna See Live Demo:

You can see the live demo by clicking below link.


Live Demo

How to Add These Buttons To Your Blog:

These buttons are very easy to use. Now I would like to divide the installation of this widgets into two parts, that's CSS part as well as HTML part. At first we can add the CSS code. Please follow the below steps.

1. Go to Blogger Dashboard > Template
2. Backup Your Template Before Making Any Changes To Your Blog
3. Click On Edit HTML > Proceed
4. Press Ctrl + F and Search The Code Shown Below ▼

]]></b:skin>

• Now Add The Below ▼ Code Just Above/Before ]]></b:skin> (use Ctrl+F to find the code) 

.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/AVvXsEgxE-_OWvdMw2Rrp0-vTtTRbqtL0VenTTnT16cMIhHf2jTTHH5pBt1a8_YIA8IPaYuRaGJPvOXExLzkYyOTGFMBmjChX1z6i_vg5Mbio6OUUUhyDiIA0dv_BuCRnX81Dv8-perRxXlGcENa/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/AVvXsEgxE-_OWvdMw2Rrp0-vTtTRbqtL0VenTTnT16cMIhHf2jTTHH5pBt1a8_YIA8IPaYuRaGJPvOXExLzkYyOTGFMBmjChX1z6i_vg5Mbio6OUUUhyDiIA0dv_BuCRnX81Dv8-perRxXlGcENa/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxE-_OWvdMw2Rrp0-vTtTRbqtL0VenTTnT16cMIhHf2jTTHH5pBt1a8_YIA8IPaYuRaGJPvOXExLzkYyOTGFMBmjChX1z6i_vg5Mbio6OUUUhyDiIA0dv_BuCRnX81Dv8-perRxXlGcENa/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/AVvXsEgxE-_OWvdMw2Rrp0-vTtTRbqtL0VenTTnT16cMIhHf2jTTHH5pBt1a8_YIA8IPaYuRaGJPvOXExLzkYyOTGFMBmjChX1z6i_vg5Mbio6OUUUhyDiIA0dv_BuCRnX81Dv8-perRxXlGcENa/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxE-_OWvdMw2Rrp0-vTtTRbqtL0VenTTnT16cMIhHf2jTTHH5pBt1a8_YIA8IPaYuRaGJPvOXExLzkYyOTGFMBmjChX1z6i_vg5Mbio6OUUUhyDiIA0dv_BuCRnX81Dv8-perRxXlGcENa/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/AVvXsEgxE-_OWvdMw2Rrp0-vTtTRbqtL0VenTTnT16cMIhHf2jTTHH5pBt1a8_YIA8IPaYuRaGJPvOXExLzkYyOTGFMBmjChX1z6i_vg5Mbio6OUUUhyDiIA0dv_BuCRnX81Dv8-perRxXlGcENa/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxE-_OWvdMw2Rrp0-vTtTRbqtL0VenTTnT16cMIhHf2jTTHH5pBt1a8_YIA8IPaYuRaGJPvOXExLzkYyOTGFMBmjChX1z6i_vg5Mbio6OUUUhyDiIA0dv_BuCRnX81Dv8-perRxXlGcENa/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/AVvXsEgxE-_OWvdMw2Rrp0-vTtTRbqtL0VenTTnT16cMIhHf2jTTHH5pBt1a8_YIA8IPaYuRaGJPvOXExLzkYyOTGFMBmjChX1z6i_vg5Mbio6OUUUhyDiIA0dv_BuCRnX81Dv8-perRxXlGcENa/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxE-_OWvdMw2Rrp0-vTtTRbqtL0VenTTnT16cMIhHf2jTTHH5pBt1a8_YIA8IPaYuRaGJPvOXExLzkYyOTGFMBmjChX1z6i_vg5Mbio6OUUUhyDiIA0dv_BuCRnX81Dv8-perRxXlGcENa/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/AVvXsEgxE-_OWvdMw2Rrp0-vTtTRbqtL0VenTTnT16cMIhHf2jTTHH5pBt1a8_YIA8IPaYuRaGJPvOXExLzkYyOTGFMBmjChX1z6i_vg5Mbio6OUUUhyDiIA0dv_BuCRnX81Dv8-perRxXlGcENa/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxE-_OWvdMw2Rrp0-vTtTRbqtL0VenTTnT16cMIhHf2jTTHH5pBt1a8_YIA8IPaYuRaGJPvOXExLzkYyOTGFMBmjChX1z6i_vg5Mbio6OUUUhyDiIA0dv_BuCRnX81Dv8-perRxXlGcENa/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/AVvXsEgxE-_OWvdMw2Rrp0-vTtTRbqtL0VenTTnT16cMIhHf2jTTHH5pBt1a8_YIA8IPaYuRaGJPvOXExLzkYyOTGFMBmjChX1z6i_vg5Mbio6OUUUhyDiIA0dv_BuCRnX81Dv8-perRxXlGcENa/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxE-_OWvdMw2Rrp0-vTtTRbqtL0VenTTnT16cMIhHf2jTTHH5pBt1a8_YIA8IPaYuRaGJPvOXExLzkYyOTGFMBmjChX1z6i_vg5Mbio6OUUUhyDiIA0dv_BuCRnX81Dv8-perRxXlGcENa/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/AVvXsEgxE-_OWvdMw2Rrp0-vTtTRbqtL0VenTTnT16cMIhHf2jTTHH5pBt1a8_YIA8IPaYuRaGJPvOXExLzkYyOTGFMBmjChX1z6i_vg5Mbio6OUUUhyDiIA0dv_BuCRnX81Dv8-perRxXlGcENa/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxE-_OWvdMw2Rrp0-vTtTRbqtL0VenTTnT16cMIhHf2jTTHH5pBt1a8_YIA8IPaYuRaGJPvOXExLzkYyOTGFMBmjChX1z6i_vg5Mbio6OUUUhyDiIA0dv_BuCRnX81Dv8-perRxXlGcENa/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/AVvXsEgxE-_OWvdMw2Rrp0-vTtTRbqtL0VenTTnT16cMIhHf2jTTHH5pBt1a8_YIA8IPaYuRaGJPvOXExLzkYyOTGFMBmjChX1z6i_vg5Mbio6OUUUhyDiIA0dv_BuCRnX81Dv8-perRxXlGcENa/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxE-_OWvdMw2Rrp0-vTtTRbqtL0VenTTnT16cMIhHf2jTTHH5pBt1a8_YIA8IPaYuRaGJPvOXExLzkYyOTGFMBmjChX1z6i_vg5Mbio6OUUUhyDiIA0dv_BuCRnX81Dv8-perRxXlGcENa/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/AVvXsEgxE-_OWvdMw2Rrp0-vTtTRbqtL0VenTTnT16cMIhHf2jTTHH5pBt1a8_YIA8IPaYuRaGJPvOXExLzkYyOTGFMBmjChX1z6i_vg5Mbio6OUUUhyDiIA0dv_BuCRnX81Dv8-perRxXlGcENa/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxE-_OWvdMw2Rrp0-vTtTRbqtL0VenTTnT16cMIhHf2jTTHH5pBt1a8_YIA8IPaYuRaGJPvOXExLzkYyOTGFMBmjChX1z6i_vg5Mbio6OUUUhyDiIA0dv_BuCRnX81Dv8-perRxXlGcENa/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/AVvXsEgxE-_OWvdMw2Rrp0-vTtTRbqtL0VenTTnT16cMIhHf2jTTHH5pBt1a8_YIA8IPaYuRaGJPvOXExLzkYyOTGFMBmjChX1z6i_vg5Mbio6OUUUhyDiIA0dv_BuCRnX81Dv8-perRxXlGcENa/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxE-_OWvdMw2Rrp0-vTtTRbqtL0VenTTnT16cMIhHf2jTTHH5pBt1a8_YIA8IPaYuRaGJPvOXExLzkYyOTGFMBmjChX1z6i_vg5Mbio6OUUUhyDiIA0dv_BuCRnX81Dv8-perRxXlGcENa/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/AVvXsEgxE-_OWvdMw2Rrp0-vTtTRbqtL0VenTTnT16cMIhHf2jTTHH5pBt1a8_YIA8IPaYuRaGJPvOXExLzkYyOTGFMBmjChX1z6i_vg5Mbio6OUUUhyDiIA0dv_BuCRnX81Dv8-perRxXlGcENa/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxE-_OWvdMw2Rrp0-vTtTRbqtL0VenTTnT16cMIhHf2jTTHH5pBt1a8_YIA8IPaYuRaGJPvOXExLzkYyOTGFMBmjChX1z6i_vg5Mbio6OUUUhyDiIA0dv_BuCRnX81Dv8-perRxXlGcENa/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/AVvXsEgxE-_OWvdMw2Rrp0-vTtTRbqtL0VenTTnT16cMIhHf2jTTHH5pBt1a8_YIA8IPaYuRaGJPvOXExLzkYyOTGFMBmjChX1z6i_vg5Mbio6OUUUhyDiIA0dv_BuCRnX81Dv8-perRxXlGcENa/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxE-_OWvdMw2Rrp0-vTtTRbqtL0VenTTnT16cMIhHf2jTTHH5pBt1a8_YIA8IPaYuRaGJPvOXExLzkYyOTGFMBmjChX1z6i_vg5Mbio6OUUUhyDiIA0dv_BuCRnX81Dv8-perRxXlGcENa/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/AVvXsEgxE-_OWvdMw2Rrp0-vTtTRbqtL0VenTTnT16cMIhHf2jTTHH5pBt1a8_YIA8IPaYuRaGJPvOXExLzkYyOTGFMBmjChX1z6i_vg5Mbio6OUUUhyDiIA0dv_BuCRnX81Dv8-perRxXlGcENa/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxE-_OWvdMw2Rrp0-vTtTRbqtL0VenTTnT16cMIhHf2jTTHH5pBt1a8_YIA8IPaYuRaGJPvOXExLzkYyOTGFMBmjChX1z6i_vg5Mbio6OUUUhyDiIA0dv_BuCRnX81Dv8-perRxXlGcENa/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/AVvXsEgxE-_OWvdMw2Rrp0-vTtTRbqtL0VenTTnT16cMIhHf2jTTHH5pBt1a8_YIA8IPaYuRaGJPvOXExLzkYyOTGFMBmjChX1z6i_vg5Mbio6OUUUhyDiIA0dv_BuCRnX81Dv8-perRxXlGcENa/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxE-_OWvdMw2Rrp0-vTtTRbqtL0VenTTnT16cMIhHf2jTTHH5pBt1a8_YIA8IPaYuRaGJPvOXExLzkYyOTGFMBmjChX1z6i_vg5Mbio6OUUUhyDiIA0dv_BuCRnX81Dv8-perRxXlGcENa/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/AVvXsEgxE-_OWvdMw2Rrp0-vTtTRbqtL0VenTTnT16cMIhHf2jTTHH5pBt1a8_YIA8IPaYuRaGJPvOXExLzkYyOTGFMBmjChX1z6i_vg5Mbio6OUUUhyDiIA0dv_BuCRnX81Dv8-perRxXlGcENa/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxE-_OWvdMw2Rrp0-vTtTRbqtL0VenTTnT16cMIhHf2jTTHH5pBt1a8_YIA8IPaYuRaGJPvOXExLzkYyOTGFMBmjChX1z6i_vg5Mbio6OUUUhyDiIA0dv_BuCRnX81Dv8-perRxXlGcENa/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/AVvXsEgxE-_OWvdMw2Rrp0-vTtTRbqtL0VenTTnT16cMIhHf2jTTHH5pBt1a8_YIA8IPaYuRaGJPvOXExLzkYyOTGFMBmjChX1z6i_vg5Mbio6OUUUhyDiIA0dv_BuCRnX81Dv8-perRxXlGcENa/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxE-_OWvdMw2Rrp0-vTtTRbqtL0VenTTnT16cMIhHf2jTTHH5pBt1a8_YIA8IPaYuRaGJPvOXExLzkYyOTGFMBmjChX1z6i_vg5Mbio6OUUUhyDiIA0dv_BuCRnX81Dv8-perRxXlGcENa/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));
}

You have added the CSS (style) part in the template and let's see how to use them. Next I m giving HTML Code of all types of button. Just follow the below simple steps to use them while writing your blog post. 

1. Switch Your Blog Post From Compose to EDIT HTML While Writing Post.
2. Select Your Button Code Below ▼ and Paste It Where You Want To Display Buttons.

<a class="button big blue" href="Your Link Here" target="_blank">Your Text Here</a>

<a class="button big orange" href="Your Link Here" target="_blank">Your Text Here</a>

<a class="button big green" href="Your Link Here" target="_blank">Your Text Here</a>

<a class="button big gray" href="Your Link Here" target="_blank">Your Text Here</a>

Remember Notes:

Before you publish your blog post, please replace YOUR LINK HERE (highlighted in yellow) with your own link, and replace Your Text Here (highlighted in yellow) with your own title. Happy Blogging and Stay Blessed.

Recommend For You:

1. Cloud Social Sharing Buttons For Blogger Blog
2. 3D Social Buttons With Rotate Spin Effect For Wordpress And Blogger

Author - Gagan Masoun is the owner of Blogs Daddy Blog.Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can find him in the usual social networks.