Animated Bubble Effect Buttons in CSS3

animation bubble
File Size:
Views Total:375
Last Update:December 24, 2017
Publish Date:December 1, 2017
Official Website:Go to website
License:MIT

we are creating a useful set of animated bubble buttons on hover with help of CSS3. you can easily turn any link on your page into an animated button by just assigning a class name. No JavaScript necessary. Four color button themes also added and three sizes are also available by assigning additional class names.

 Demo Download
Total View375
Official url Click Here
LicenseMIT

How to use it:

  1. Html: add class for button size
    <a href="#" class="button blue big">Download</a>
    <a href="#" class="button blue medium">Submit</a>
    <a href="#" class="button small blue rounded">Submit</a>
  2. Css: button css
    /* 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;
    }
    
    .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('button_bg.png');
    
        /* CSS3 background positioning property with multiple values. The background
           images themselves are defined in the individual color classes */
    
        background-position:bottom left, top right, 0 0, 0 0;
        background-clip:border-box;
    
        /* Applying a default border radius 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;
        -o-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;
    }
  3.  Animation : button css animation
    /* 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('button_bg.png'), url('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('button_bg.png'), url('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('button_bg.png'), url('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('button_bg.png'), url('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));
    }

    Done