Skip to main content

CSS3 Animated Bubble With Demo

Guyz in this tutorial I'm going to provide you the codes for  CSS3 Animated Bubble Buttons.




CODES 

 CSS 

.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://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/button_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://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/button_bg.png'), url('http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/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('http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/button_bg.png'), url('http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/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('http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/button_bg.png'), url('http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/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('http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/button_bg.png'), url('http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/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('http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/button_bg.png'), url('http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/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('http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/button_bg.png'), url('http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/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('http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/button_bg.png'), url('http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/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('http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/button_bg.png'), url('http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/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('http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/button_bg.png'), url('http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/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('http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/button_bg.png'), url('http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/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('http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/button_bg.png'), url('http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/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('http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/button_bg.png'), url('http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/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));
}

.gray.button{
 color:#525252 !important;
 border:1px solid #a5a5a5 !important; 
 background-color: #a9adb1;
 
 background-image:url('http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/button_bg.png'), url('http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/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('http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/button_bg.png'), url('http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/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('http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/button_bg.png'), url('http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/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('http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/button_bg.png'), url('http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/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));
}

 HTML

<div id="buttonContainer">
 
    <a href="#" class="button big blue">Big Button</a>
    <a href="#" class="button big green">Big Button</a>
    <a href="#" class="button big orange">Big Button</a>
    <a href="#" class="button big gray">Big Button</a>
    
    <a href="#" class="button blue medium">Medium Button</a>
    <a href="#" class="button green medium">Medium Button</a>
    <a href="#" class="button orange medium">Medium Button</a>
    <a href="#" class="button gray medium">Medium Button</a>
    
    <a href="#" class="button small blue">Small Button</a>
    <a href="#" class="button small green">Small Button</a>
    <a href="#" class="button small blue rounded">Rounded</a>
    
    <a href="#" class="button small orange">Small Button</a>
    <a href="#" class="button small gray">Small Button</a>
        
    <a href="#" class="button small green rounded">Rounded</a>
    
</div>

Download 

DEMO







We are Waiting For Your Precious Comments ....

Comments

Popular posts from this blog

10 Free Android Apps and Games you should use/play

Welcome guys, here we have 10 free android apps and games you might like.


Google Pixel 2 and Pixel 2 XL Announced, Price and Availability In India, US and more

Google Launched it's duo Pixel 2 and Pixel 2 XL in a event on 4th of October. The event was dynamic and included more announcement that just Pixel 2 smartphones which we will see later in this article.  




Google Pixel 2 and Pixel 2 XL pack the same specs except the display. The Google Pixel 2 sports a 1080p 5-inch AMOLED display on the other hand Pixel 2 XL sports a big 1440p 6-inch P-OLED DISPLAY. Both the 2017 Pixel smartphones are powered by Qualcomm Snapdragon 835 processor, coupled with 4GB of RAM.   

The first generation Pixel and Pixel XL device got 89 rating for it's camera from DXO Mark and this year the 2017 Pixel 2 and Pixel 2 XL got 98 DXO Mark. The duo feature a 12.2MP rear camera, f/1.8 aperture, Dual-LED flash and can shoot 4K videos, they have both OIS and EIS for stabilization. Yes, the pixel does not have a dual camera, Google is using a technology, in layman language, the an image will be from two angles which will give depth perception. 


With AI and ML Google h…

HTC One M9+ Available In Netherlands For Purchase

HTC One M9+ is now available for purchase in Netherlands, but although it looks like not official.



You may also read - Samsung Galaxy S6 Vs HTC One M9+ Full Comparison

Netherland online retailer Belsimpel.nl. The phone is priced at €699 and HTC One M9+ is available in silver variant. HTC One M9+ has a 5.2-inch Super LCD3 display protected by Corning Gorilla Glass 3. It runs Android Lollipop skinned on top with HTC's Sense UI 7.0 . It is powered by 2.2GHz Octa-core processor with Mediatek MT6795T chipset. It packs 32GB internal memory with 3GB RAM and expandable memory via microSD .

It features 20MP and 2.1MP rear camera with autofocus, dual LED flash and 4MP front facing camera. It packs 2840mAh battery.

Source | Source