Home » CSS » How To Add Attractive Animated Bubble Buttons Using CSS3

Friday, November 16, 2012

0
How To Add Attractive Animated Bubble Buttons Using CSS3
This is a set of lively buttons with the land of CSS3. It contains quaternity several change and also quaternary polar name and cardinal disciform concretism. This switch is organisation by TutorialZine.com. Using this add, you can easily dawdle any link on your tender into spirited button by fair distribution a .add grade itemize. JavaScript is not necessary!
 To use and add this lively buttons on your tender, blog or website, righteous simply canvas the steps beneath.

View Demo
  • Login to your Blogger Dashboard.
  • Click the drop-down menu and select Template.
  • Backup your Template before making any changes.
  • Click Edit HTML ---> Proceed --->  Expand Widget Templates. (How To Edit HTML)
  • Click Ctrl+F and search the code below:
]]></b:skin>
  • Just above the ]]></b:skin>, Paste the code below:
.button{
 font:15px Calibri, Arial, sans-serif;

 /* A semi-transparent text shadow */
 text-shadow:1px 1px 0 rgba(255,255,255,0.4);

 /* Overriding the default underline styling of the links */
 text-decoration:none !important;
 white-space:nowrap;

 display:inline-block;
 vertical-align:baseline;
 position:relative;
 cursor:pointer;
 padding:10px 20px;

 background-repeat:no-repeat;

 /* The following two rules are fallbacks, in case
    the browser does not support multiple backgrounds. */

 background-position:bottom left;
 background-image:url('http://1.bp.blogspot.com/-WpNrfSGXmrg/UDYs2BFgHFI/AAAAAAAAA00/dtf7VR1ca-o/s1600/DemoButton+bg.png');

 /* Multiple backgrounds version. The background images
    are defined individually in color classes */

 background-position:bottom left, top right, 0 0, 0 0;
 background-clip:border-box;

 /* Applying a default border raidus of 8px */

 -moz-border-radius:8px;
 -webkit-border-radius:8px;
 border-radius:8px;

 /* A 1px highlight inside of the button */

 -moz-box-shadow:0 0 1px #fff inset;
 -webkit-box-shadow:0 0 1px #fff inset;
 box-shadow:0 0 1px #fff inset;

 /* Animating the background positions with CSS3 */
 /* Currently works only in Safari/Chrome */

 -webkit-transition:background-position 1s;
 -moz-transition:background-position 1s;
 transition:background-position 1s;
}

.button:hover{

 /* The first rule is a fallback, in case the browser
    does not support multiple backgrounds
 */

 background-position:top left;
 background-position:top left, bottom right, 0 0, 0 0;
}

.button:active{
 /* Moving the button 1px to the bottom when clicked */
 bottom:-1px;
}

/* The three buttons sizes */

.button.big  { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}

/* A more rounded button */

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


/* Defining four button colors */


/* BlueButton */

.blue.button{
 color:#0f4b6d !important;

 border:1px solid #84acc3 !important;

 /* A fallback background color */
 background-color: #48b5f2;

 /* Specifying a version with gradients according to */

 background-image: url('http://1.bp.blogspot.com/-WpNrfSGXmrg/UDYs2BFgHFI/AAAAAAAAA00/dtf7VR1ca-o/s1600/DemoButton+bg.png'), url('http://1.bp.blogspot.com/-WpNrfSGXmrg/UDYs2BFgHFI/AAAAAAAAA00/dtf7VR1ca-o/s1600/DemoButton+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('http://1.bp.blogspot.com/-WpNrfSGXmrg/UDYs2BFgHFI/AAAAAAAAA00/dtf7VR1ca-o/s1600/DemoButton+bg.png'), url('http://1.bp.blogspot.com/-WpNrfSGXmrg/UDYs2BFgHFI/AAAAAAAAA00/dtf7VR1ca-o/s1600/DemoButton+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('http://1.bp.blogspot.com/-WpNrfSGXmrg/UDYs2BFgHFI/AAAAAAAAA00/dtf7VR1ca-o/s1600/DemoButton+bg.png'), url('http://1.bp.blogspot.com/-WpNrfSGXmrg/UDYs2BFgHFI/AAAAAAAAA00/dtf7VR1ca-o/s1600/DemoButton+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('http://1.bp.blogspot.com/-WpNrfSGXmrg/UDYs2BFgHFI/AAAAAAAAA00/dtf7VR1ca-o/s1600/DemoButton+bg.png'), url('http://1.bp.blogspot.com/-WpNrfSGXmrg/UDYs2BFgHFI/AAAAAAAAA00/dtf7VR1ca-o/s1600/DemoButton+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('http://1.bp.blogspot.com/-WpNrfSGXmrg/UDYs2BFgHFI/AAAAAAAAA00/dtf7VR1ca-o/s1600/DemoButton+bg.png'), url('http://1.bp.blogspot.com/-WpNrfSGXmrg/UDYs2BFgHFI/AAAAAAAAA00/dtf7VR1ca-o/s1600/DemoButton+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('http://1.bp.blogspot.com/-WpNrfSGXmrg/UDYs2BFgHFI/AAAAAAAAA00/dtf7VR1ca-o/s1600/DemoButton+bg.png'), url('http://1.bp.blogspot.com/-WpNrfSGXmrg/UDYs2BFgHFI/AAAAAAAAA00/dtf7VR1ca-o/s1600/DemoButton+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('http://1.bp.blogspot.com/-WpNrfSGXmrg/UDYs2BFgHFI/AAAAAAAAA00/dtf7VR1ca-o/s1600/DemoButton+bg.png'), url('http://1.bp.blogspot.com/-WpNrfSGXmrg/UDYs2BFgHFI/AAAAAAAAA00/dtf7VR1ca-o/s1600/DemoButton+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('http://1.bp.blogspot.com/-WpNrfSGXmrg/UDYs2BFgHFI/AAAAAAAAA00/dtf7VR1ca-o/s1600/DemoButton+bg.png'), url('http://1.bp.blogspot.com/-WpNrfSGXmrg/UDYs2BFgHFI/AAAAAAAAA00/dtf7VR1ca-o/s1600/DemoButton+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('http://1.bp.blogspot.com/-WpNrfSGXmrg/UDYs2BFgHFI/AAAAAAAAA00/dtf7VR1ca-o/s1600/DemoButton+bg.png'), url('http://1.bp.blogspot.com/-WpNrfSGXmrg/UDYs2BFgHFI/AAAAAAAAA00/dtf7VR1ca-o/s1600/DemoButton+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('http://1.bp.blogspot.com/-WpNrfSGXmrg/UDYs2BFgHFI/AAAAAAAAA00/dtf7VR1ca-o/s1600/DemoButton+bg.png'), url('http://1.bp.blogspot.com/-WpNrfSGXmrg/UDYs2BFgHFI/AAAAAAAAA00/dtf7VR1ca-o/s1600/DemoButton+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('http://1.bp.blogspot.com/-WpNrfSGXmrg/UDYs2BFgHFI/AAAAAAAAA00/dtf7VR1ca-o/s1600/DemoButton+bg.png'), url('http://1.bp.blogspot.com/-WpNrfSGXmrg/UDYs2BFgHFI/AAAAAAAAA00/dtf7VR1ca-o/s1600/DemoButton+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('http://1.bp.blogspot.com/-WpNrfSGXmrg/UDYs2BFgHFI/AAAAAAAAA00/dtf7VR1ca-o/s1600/DemoButton+bg.png'), url('http://1.bp.blogspot.com/-WpNrfSGXmrg/UDYs2BFgHFI/AAAAAAAAA00/dtf7VR1ca-o/s1600/DemoButton+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));
}

.gray.button{
 color:#525252 !important;
 border:1px solid #a5a5a5 !important; 
 background-color: #a9adb1;

 background-image:url('http://1.bp.blogspot.com/-WpNrfSGXmrg/UDYs2BFgHFI/AAAAAAAAA00/dtf7VR1ca-o/s1600/DemoButton+bg.png'), url('http://1.bp.blogspot.com/-WpNrfSGXmrg/UDYs2BFgHFI/AAAAAAAAA00/dtf7VR1ca-o/s1600/DemoButton+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('http://1.bp.blogspot.com/-WpNrfSGXmrg/UDYs2BFgHFI/AAAAAAAAA00/dtf7VR1ca-o/s1600/DemoButton+bg.png'), url('http://1.bp.blogspot.com/-WpNrfSGXmrg/UDYs2BFgHFI/AAAAAAAAA00/dtf7VR1ca-o/s1600/DemoButton+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('http://1.bp.blogspot.com/-WpNrfSGXmrg/UDYs2BFgHFI/AAAAAAAAA00/dtf7VR1ca-o/s1600/DemoButton+bg.png'), url('http://1.bp.blogspot.com/-WpNrfSGXmrg/UDYs2BFgHFI/AAAAAAAAA00/dtf7VR1ca-o/s1600/DemoButton+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('http://1.bp.blogspot.com/-WpNrfSGXmrg/UDYs2BFgHFI/AAAAAAAAA00/dtf7VR1ca-o/s1600/DemoButton+bg.png'), url('http://1.bp.blogspot.com/-WpNrfSGXmrg/UDYs2BFgHFI/AAAAAAAAA00/dtf7VR1ca-o/s1600/DemoButton+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));
}
  • Now click Save Template.

HTML PART

HTML For Big Buttons

<a href="Your URL Here!" class="button blue big">Big Button</a>
<a href="Your URL Here!" class="button green big">Big Button</a>
<a href="Your URL Here!" class="button orange big">Big Button</a>
<a href="Your URL Here!" class="button gray big">Big Button</a>

HTML For Medium Buttons

<a href="Your URL Here!" class="button blue medium">Medium Button</a>
<a href="Your URL Here!" class="button green medium">Medium Button</a>
<a href="Your URL Here!" class="button orange medium">Medium Button</a>
<a href="Your URL Here!" class="button gray medium">Medium Button</a>

HTML For Small Buttons

<a href="Your URL Here!" class="button blue small">Small Button</a>
<a href="Your URL Here!" class="button green small">Small Button</a>
<a href="Your URL Here!" class="button orange small">Small Button</a>
<a href="Your URL Here!" class="button gray small">Small Button</a>

HTML For Rounded Buttons

<a href="Your URL Here!" class="button blue rounded">Rounded Button</a>
<a href="Your URL Here!" class="button green rounded">Rounded Button</a>
<a href="Your URL Here!" class="button orange rounded">Rounded Button</a>
<a href="Your URL Here!" class="button gray rounded">Rounded Button</a>
  • Replace Your URL Here! with your link and replace also the Title.
Buttons are entirely CSS3 based. You can create your own colors and shapes by modifying the CSS file. 
If you enjoy this post! Please take 5 seconds to share it.

0 comments:

◄ Newer Post Older Post ►
Subscribe to: Post Comments (Atom)
 

Copyright 2013 Sinhala MP3Create Blog Template by Farhan Share and Tuliskan