™Galery™

Masih seputar CSS3, lagi ngidam CSS3 kayanya jadi pengen terus posting tutorial CSS3 .. hehe, Untuk kali ini saya menemukkan Tutorial Membuat Button di tutorialzine.com tapi memiliki Animasi bubble menggunakkan CSS3.
Button ini diberi background image dengan Buble yang masing-masing mempunyai tempat saat kita sorot dengan kursor atau pada saat hovernya. untuk membuat sekaligus melihat demonya kita praktekkan sekarang juga:
Untuk Cara membuatnya ikuti langkah-langkah berikut :

1. Login blogger
2. Rancangan, Edit Html
3. Cari kode ]]></b:skin> dan simpan CSS berikut diatasnya:

.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicUb89ebo72ou7Q-ShpIZRKSwcwHh76x27o4ljzRf2h5Mgk3zLK8-YtFtla3J7Lb_Srg22lbhWgp24bWPxVeKkHkbNoVQRyCNcleDqE6YCpZct1l-jlGjg4UpQ1J2n2mrsjZf73E6yObU/s1600/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;
}

.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicUb89ebo72ou7Q-ShpIZRKSwcwHh76x27o4ljzRf2h5Mgk3zLK8-YtFtla3J7Lb_Srg22lbhWgp24bWPxVeKkHkbNoVQRyCNcleDqE6YCpZct1l-jlGjg4UpQ1J2n2mrsjZf73E6yObU/s1600/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicUb89ebo72ou7Q-ShpIZRKSwcwHh76x27o4ljzRf2h5Mgk3zLK8-YtFtla3J7Lb_Srg22lbhWgp24bWPxVeKkHkbNoVQRyCNcleDqE6YCpZct1l-jlGjg4UpQ1J2n2mrsjZf73E6yObU/s1600/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/AVvXsEicUb89ebo72ou7Q-ShpIZRKSwcwHh76x27o4ljzRf2h5Mgk3zLK8-YtFtla3J7Lb_Srg22lbhWgp24bWPxVeKkHkbNoVQRyCNcleDqE6YCpZct1l-jlGjg4UpQ1J2n2mrsjZf73E6yObU/s1600/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicUb89ebo72ou7Q-ShpIZRKSwcwHh76x27o4ljzRf2h5Mgk3zLK8-YtFtla3J7Lb_Srg22lbhWgp24bWPxVeKkHkbNoVQRyCNcleDqE6YCpZct1l-jlGjg4UpQ1J2n2mrsjZf73E6yObU/s1600/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/AVvXsEicUb89ebo72ou7Q-ShpIZRKSwcwHh76x27o4ljzRf2h5Mgk3zLK8-YtFtla3J7Lb_Srg22lbhWgp24bWPxVeKkHkbNoVQRyCNcleDqE6YCpZct1l-jlGjg4UpQ1J2n2mrsjZf73E6yObU/s1600/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicUb89ebo72ou7Q-ShpIZRKSwcwHh76x27o4ljzRf2h5Mgk3zLK8-YtFtla3J7Lb_Srg22lbhWgp24bWPxVeKkHkbNoVQRyCNcleDqE6YCpZct1l-jlGjg4UpQ1J2n2mrsjZf73E6yObU/s1600/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/AVvXsEicUb89ebo72ou7Q-ShpIZRKSwcwHh76x27o4ljzRf2h5Mgk3zLK8-YtFtla3J7Lb_Srg22lbhWgp24bWPxVeKkHkbNoVQRyCNcleDqE6YCpZct1l-jlGjg4UpQ1J2n2mrsjZf73E6yObU/s1600/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicUb89ebo72ou7Q-ShpIZRKSwcwHh76x27o4ljzRf2h5Mgk3zLK8-YtFtla3J7Lb_Srg22lbhWgp24bWPxVeKkHkbNoVQRyCNcleDqE6YCpZct1l-jlGjg4UpQ1J2n2mrsjZf73E6yObU/s1600/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));
}