+10 344 123 64 77
Home / Beautiful CSS Buttons with Bubbles Animation for Blogger

Saturday, February 9, 2013

Beautiful CSS Buttons with Bubbles Animation for Blogger

css buttons hover bubbles animation blogger
Hello Guys, Today I'm going to show you How to Add Beautiful CSS Buttons with Bubbles Hover effect on Blogger blogs. These buttons come in four different colors and they are: Green, Orange, Grey and Blue. You must have seen these CSS buttons on many blogs, You can use these buttons for Download Links, Demo Links etc. on your blog. 


Features & Advantages

  • Fast Loading
  • Mouse Hover Animation (Bubbles)
  • Four Different Colors
  • Professional Look
  • You can use it for Download Links, Demo Links etc.
  • You can place it anywhere inside blog post.
  • Does not slow your blog load time.

Widget Demo



Here is the working demo of all four buttons.

How to Add Beautiful CSS Buttons to Blogger 


Installation is simple, Just follow the steps given below.

  • Go to Blogger Dashboard > Template
  • Click on Edit HTML (Please Backup Template First)
  • Search for ]]></b:skin> (Using Ctrl+F)
  • Copy Paste the following code just before ]]></b:skin>

.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/AVvXsEiAnCyh3Eh82Q7ji-e8KStlbDhvpSqqdY-KGd5DGjm-xZ_Vvhjaf8WU0PFyvHX7RdUo60fy-Z9JysvqxGZL3pSaGCgg8j0MVFIaSfTW5ygUdMIwONGJgkz9CxBaeq9wv1yOSSGGGi-Ibhnc/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/AVvXsEiAnCyh3Eh82Q7ji-e8KStlbDhvpSqqdY-KGd5DGjm-xZ_Vvhjaf8WU0PFyvHX7RdUo60fy-Z9JysvqxGZL3pSaGCgg8j0MVFIaSfTW5ygUdMIwONGJgkz9CxBaeq9wv1yOSSGGGi-Ibhnc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAnCyh3Eh82Q7ji-e8KStlbDhvpSqqdY-KGd5DGjm-xZ_Vvhjaf8WU0PFyvHX7RdUo60fy-Z9JysvqxGZL3pSaGCgg8j0MVFIaSfTW5ygUdMIwONGJgkz9CxBaeq9wv1yOSSGGGi-Ibhnc/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/AVvXsEiAnCyh3Eh82Q7ji-e8KStlbDhvpSqqdY-KGd5DGjm-xZ_Vvhjaf8WU0PFyvHX7RdUo60fy-Z9JysvqxGZL3pSaGCgg8j0MVFIaSfTW5ygUdMIwONGJgkz9CxBaeq9wv1yOSSGGGi-Ibhnc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAnCyh3Eh82Q7ji-e8KStlbDhvpSqqdY-KGd5DGjm-xZ_Vvhjaf8WU0PFyvHX7RdUo60fy-Z9JysvqxGZL3pSaGCgg8j0MVFIaSfTW5ygUdMIwONGJgkz9CxBaeq9wv1yOSSGGGi-Ibhnc/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/AVvXsEiAnCyh3Eh82Q7ji-e8KStlbDhvpSqqdY-KGd5DGjm-xZ_Vvhjaf8WU0PFyvHX7RdUo60fy-Z9JysvqxGZL3pSaGCgg8j0MVFIaSfTW5ygUdMIwONGJgkz9CxBaeq9wv1yOSSGGGi-Ibhnc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAnCyh3Eh82Q7ji-e8KStlbDhvpSqqdY-KGd5DGjm-xZ_Vvhjaf8WU0PFyvHX7RdUo60fy-Z9JysvqxGZL3pSaGCgg8j0MVFIaSfTW5ygUdMIwONGJgkz9CxBaeq9wv1yOSSGGGi-Ibhnc/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/AVvXsEiAnCyh3Eh82Q7ji-e8KStlbDhvpSqqdY-KGd5DGjm-xZ_Vvhjaf8WU0PFyvHX7RdUo60fy-Z9JysvqxGZL3pSaGCgg8j0MVFIaSfTW5ygUdMIwONGJgkz9CxBaeq9wv1yOSSGGGi-Ibhnc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAnCyh3Eh82Q7ji-e8KStlbDhvpSqqdY-KGd5DGjm-xZ_Vvhjaf8WU0PFyvHX7RdUo60fy-Z9JysvqxGZL3pSaGCgg8j0MVFIaSfTW5ygUdMIwONGJgkz9CxBaeq9wv1yOSSGGGi-Ibhnc/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/AVvXsEiAnCyh3Eh82Q7ji-e8KStlbDhvpSqqdY-KGd5DGjm-xZ_Vvhjaf8WU0PFyvHX7RdUo60fy-Z9JysvqxGZL3pSaGCgg8j0MVFIaSfTW5ygUdMIwONGJgkz9CxBaeq9wv1yOSSGGGi-Ibhnc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAnCyh3Eh82Q7ji-e8KStlbDhvpSqqdY-KGd5DGjm-xZ_Vvhjaf8WU0PFyvHX7RdUo60fy-Z9JysvqxGZL3pSaGCgg8j0MVFIaSfTW5ygUdMIwONGJgkz9CxBaeq9wv1yOSSGGGi-Ibhnc/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/AVvXsEiAnCyh3Eh82Q7ji-e8KStlbDhvpSqqdY-KGd5DGjm-xZ_Vvhjaf8WU0PFyvHX7RdUo60fy-Z9JysvqxGZL3pSaGCgg8j0MVFIaSfTW5ygUdMIwONGJgkz9CxBaeq9wv1yOSSGGGi-Ibhnc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAnCyh3Eh82Q7ji-e8KStlbDhvpSqqdY-KGd5DGjm-xZ_Vvhjaf8WU0PFyvHX7RdUo60fy-Z9JysvqxGZL3pSaGCgg8j0MVFIaSfTW5ygUdMIwONGJgkz9CxBaeq9wv1yOSSGGGi-Ibhnc/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/AVvXsEiAnCyh3Eh82Q7ji-e8KStlbDhvpSqqdY-KGd5DGjm-xZ_Vvhjaf8WU0PFyvHX7RdUo60fy-Z9JysvqxGZL3pSaGCgg8j0MVFIaSfTW5ygUdMIwONGJgkz9CxBaeq9wv1yOSSGGGi-Ibhnc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAnCyh3Eh82Q7ji-e8KStlbDhvpSqqdY-KGd5DGjm-xZ_Vvhjaf8WU0PFyvHX7RdUo60fy-Z9JysvqxGZL3pSaGCgg8j0MVFIaSfTW5ygUdMIwONGJgkz9CxBaeq9wv1yOSSGGGi-Ibhnc/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/AVvXsEiAnCyh3Eh82Q7ji-e8KStlbDhvpSqqdY-KGd5DGjm-xZ_Vvhjaf8WU0PFyvHX7RdUo60fy-Z9JysvqxGZL3pSaGCgg8j0MVFIaSfTW5ygUdMIwONGJgkz9CxBaeq9wv1yOSSGGGi-Ibhnc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAnCyh3Eh82Q7ji-e8KStlbDhvpSqqdY-KGd5DGjm-xZ_Vvhjaf8WU0PFyvHX7RdUo60fy-Z9JysvqxGZL3pSaGCgg8j0MVFIaSfTW5ygUdMIwONGJgkz9CxBaeq9wv1yOSSGGGi-Ibhnc/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/AVvXsEiAnCyh3Eh82Q7ji-e8KStlbDhvpSqqdY-KGd5DGjm-xZ_Vvhjaf8WU0PFyvHX7RdUo60fy-Z9JysvqxGZL3pSaGCgg8j0MVFIaSfTW5ygUdMIwONGJgkz9CxBaeq9wv1yOSSGGGi-Ibhnc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAnCyh3Eh82Q7ji-e8KStlbDhvpSqqdY-KGd5DGjm-xZ_Vvhjaf8WU0PFyvHX7RdUo60fy-Z9JysvqxGZL3pSaGCgg8j0MVFIaSfTW5ygUdMIwONGJgkz9CxBaeq9wv1yOSSGGGi-Ibhnc/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/AVvXsEiAnCyh3Eh82Q7ji-e8KStlbDhvpSqqdY-KGd5DGjm-xZ_Vvhjaf8WU0PFyvHX7RdUo60fy-Z9JysvqxGZL3pSaGCgg8j0MVFIaSfTW5ygUdMIwONGJgkz9CxBaeq9wv1yOSSGGGi-Ibhnc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAnCyh3Eh82Q7ji-e8KStlbDhvpSqqdY-KGd5DGjm-xZ_Vvhjaf8WU0PFyvHX7RdUo60fy-Z9JysvqxGZL3pSaGCgg8j0MVFIaSfTW5ygUdMIwONGJgkz9CxBaeq9wv1yOSSGGGi-Ibhnc/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/AVvXsEiAnCyh3Eh82Q7ji-e8KStlbDhvpSqqdY-KGd5DGjm-xZ_Vvhjaf8WU0PFyvHX7RdUo60fy-Z9JysvqxGZL3pSaGCgg8j0MVFIaSfTW5ygUdMIwONGJgkz9CxBaeq9wv1yOSSGGGi-Ibhnc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAnCyh3Eh82Q7ji-e8KStlbDhvpSqqdY-KGd5DGjm-xZ_Vvhjaf8WU0PFyvHX7RdUo60fy-Z9JysvqxGZL3pSaGCgg8j0MVFIaSfTW5ygUdMIwONGJgkz9CxBaeq9wv1yOSSGGGi-Ibhnc/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/AVvXsEiAnCyh3Eh82Q7ji-e8KStlbDhvpSqqdY-KGd5DGjm-xZ_Vvhjaf8WU0PFyvHX7RdUo60fy-Z9JysvqxGZL3pSaGCgg8j0MVFIaSfTW5ygUdMIwONGJgkz9CxBaeq9wv1yOSSGGGi-Ibhnc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAnCyh3Eh82Q7ji-e8KStlbDhvpSqqdY-KGd5DGjm-xZ_Vvhjaf8WU0PFyvHX7RdUo60fy-Z9JysvqxGZL3pSaGCgg8j0MVFIaSfTW5ygUdMIwONGJgkz9CxBaeq9wv1yOSSGGGi-Ibhnc/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/AVvXsEiAnCyh3Eh82Q7ji-e8KStlbDhvpSqqdY-KGd5DGjm-xZ_Vvhjaf8WU0PFyvHX7RdUo60fy-Z9JysvqxGZL3pSaGCgg8j0MVFIaSfTW5ygUdMIwONGJgkz9CxBaeq9wv1yOSSGGGi-Ibhnc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAnCyh3Eh82Q7ji-e8KStlbDhvpSqqdY-KGd5DGjm-xZ_Vvhjaf8WU0PFyvHX7RdUo60fy-Z9JysvqxGZL3pSaGCgg8j0MVFIaSfTW5ygUdMIwONGJgkz9CxBaeq9wv1yOSSGGGi-Ibhnc/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/AVvXsEiAnCyh3Eh82Q7ji-e8KStlbDhvpSqqdY-KGd5DGjm-xZ_Vvhjaf8WU0PFyvHX7RdUo60fy-Z9JysvqxGZL3pSaGCgg8j0MVFIaSfTW5ygUdMIwONGJgkz9CxBaeq9wv1yOSSGGGi-Ibhnc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAnCyh3Eh82Q7ji-e8KStlbDhvpSqqdY-KGd5DGjm-xZ_Vvhjaf8WU0PFyvHX7RdUo60fy-Z9JysvqxGZL3pSaGCgg8j0MVFIaSfTW5ygUdMIwONGJgkz9CxBaeq9wv1yOSSGGGi-Ibhnc/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/AVvXsEiAnCyh3Eh82Q7ji-e8KStlbDhvpSqqdY-KGd5DGjm-xZ_Vvhjaf8WU0PFyvHX7RdUo60fy-Z9JysvqxGZL3pSaGCgg8j0MVFIaSfTW5ygUdMIwONGJgkz9CxBaeq9wv1yOSSGGGi-Ibhnc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAnCyh3Eh82Q7ji-e8KStlbDhvpSqqdY-KGd5DGjm-xZ_Vvhjaf8WU0PFyvHX7RdUo60fy-Z9JysvqxGZL3pSaGCgg8j0MVFIaSfTW5ygUdMIwONGJgkz9CxBaeq9wv1yOSSGGGi-Ibhnc/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/AVvXsEiAnCyh3Eh82Q7ji-e8KStlbDhvpSqqdY-KGd5DGjm-xZ_Vvhjaf8WU0PFyvHX7RdUo60fy-Z9JysvqxGZL3pSaGCgg8j0MVFIaSfTW5ygUdMIwONGJgkz9CxBaeq9wv1yOSSGGGi-Ibhnc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAnCyh3Eh82Q7ji-e8KStlbDhvpSqqdY-KGd5DGjm-xZ_Vvhjaf8WU0PFyvHX7RdUo60fy-Z9JysvqxGZL3pSaGCgg8j0MVFIaSfTW5ygUdMIwONGJgkz9CxBaeq9wv1yOSSGGGi-Ibhnc/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));
}

  • Save Template and Done!!!

Now you've successfully added the CSS code inside your Blogger Template. 

How to Use Buttons 


After adding CSS. Now whenever you want the button to appear, simply use the code of the color you want.

<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 Your Link with the Link and Live Demo with the Button Text.
5:52 AM , , Leave a Comment
Avatar of Surya
Surya

Out too the been like hard off. Improve enquire welcome own beloved matters her. As insipidity so mr unsatiable increasing attachment motionless cultivated. Addition mr husbands unpacked occasion he.

0 comments:

Post a Comment

© 2012 Blog For Money | Designed by Template Trackers - Published By Gooyaabi Templates
All Rights Strictly Reserved.