CSS3 Bubble Buttons With Hover Effect For Blogger

This are very cool and awesome looking buttons for blogger. This buttons are made of pure css and have a cool hover effect. On hover the bubble background of the buttons starts spinning button. This buttons can be added easily so i will teach you how to add this buttons to blogger.

Below is the Demo Of this Button

TEXT HERE   TEXT HERE    TEXT HERE    TEXT HERE 
TEXT HERE    TEXT HERE    TEXT HERE    TEXT HERE
TEXT HERE     TEXT HERE     TEXT HERE     TEXT HERE
TEXT HERE     TEXT HERE     TEXT HERE     TEXT HERE

Steps To Add Bubble Buttons To Blogger

• Login to your Dashboard.
• Go to Template >>Edit Html.
• Find for ]]></b:skin> tag.
• Paste the below code just above  ]]></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('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png');
    background-position: bottom left, top right, 0 0, 0 0;
    background-clip: border-box;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    border-radius: 9px;
    -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 1.2s;
    -moz-transition: background-position 1.2s;
    transition: background-position 1.2s;
}

.button:hover {
    background-position: top left;
    background-position: top left, bottom right, 0 0, 0 0;
}

.button:active {

    bottom: -3px;
}

.button.big {
    font-size: 30px;
}

.button.medium {
    font-size: 16px;
}

.button.small {
    font-size: 12px;
}

.button.rounded {
    -moz-border-radius: 4em;
    -webkit-border-radius: 4em;
    border-radius: 4em;
}

.blue.button {
    color: #0f4b6d !important;
    border: 1px solid #84acc3 !important;
    background-color: #48b5f2;
    background-image: url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.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://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.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('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.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://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.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 {
    color: #345903 !important;
    border: 1px solid #96a37b !important;
    background-color: #79be1e;
    background-image: url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.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://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.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('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.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://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.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 {
    color: #693e0a !important;
    border: 1px solid #bea280 !important;
    background-color: #e38d27;
    background-image: url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.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://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.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('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.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://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.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));
}

.gray.button {
    color: #525252 !important;
    border: 1px solid #a5a5a5 !important;
    background-color: #a9adb1;
    background-image: url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.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://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.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('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.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://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.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));
}

• Now,click on Save the Template.
• Now, write a New Post.
• To have this button there just paste any of the below code as per your choice.

Note: First choose size of a button then choose for the color of the button

For Big Buttons 

<a href="LINK HERE" class="button big blue">TEXT HERE</a>
<a href="LINK HERE" class="button big green">TEXT HERE</a>
<a href="LINK HERE" class="button big orange">TEXT HERE</a>
<a href="LINK HERE" class="button big gray">TEXT HERE</a>

For Medium Buttons

<a href="LINK HERE" class="button blue medium">TEXT HERE</a>
<a href="LINK HERE" class="button green medium">TEXT HERE</a>
<a href="LINK HERE" class="button orange medium">TEXT HERE</a>
<a href="LINK HERE" class="button gray medium">TEXT HERE</a>

For Small Buttons

<a href="LINK HERE" class="button small blue">TEXT HERE</a>
<a href="LINK HERE" class="button small green">TEXT HERE</a>
<a href="LINK HERE" class="button small orange">TEXT HERE</a>
<a href="LINK HERE" class="button small gray">TEXT HERE</a>

For Small Rounded Buttons

<a href="LINK HERE" class="button small blue rounded">TEXT HERE</a>
<a href="LINK HERE" class="button small green rounded">TEXT HERE</a>
<a href="LINK HERE" class="button small orange rounded">TEXT HERE</a>
<a href="LINK HERE" class="button small gray rounded">TEXT HERE</a>

It's Done.

Categories: Blogger Tricks , CSS