Material Design Ripple Animated Buttons For Blogger

Har blog mein kabhi na kabhi Demo, Down load, Buy Now, etc. is tarah ke buttons ki jarurat padta hai. Agar ap chahe to hyperlink karke bhi ap is tarah ke kam chala sakte hai lekin blog design aur bhi standard aur attractive banane ke liye is tarah ki buttons jor lena hi vaitar hai. Isiliye mai aj ki is post mein apke liye lekar aya hoon material design ripple animated button jo bohot hi sundar aur standard hai.

material-design-ripple-animated-buttons-blogger-hindi

Niche ap is material design ripple animated buttons ki photo aur demo dekh sakte hai.

material-design-ripple-animated-buttons-blogger-hindi


Yaha pe mai kul milake 10 buttons share kia hai. Sabhi buttons Google ki material design ki concept mein banaya gaya hai aur sath mein jora gaya hai ripple animation effect jisse is buttons mein click karne pad apko water drop effect milega. Sabhi buttons CSS3 aur HTML5 use karke banaya gaya hai aur icon ki taur pe Font Awesome use kia gaya hai.

Blog Mein Material Design Ripple Animated Buttons Kaise Jore?


Niche diye gaye steps ko follow kare.

Step 1. Pahle apne Blogger account mein login kare aur Dashboard > Template > Edit HTML mein click kare.

Step 2. Abh keyboard mein se CTRL+F key ek saath press karke ]]></b:skin> tag ko search kare.

Step 3. Abh niche diye gaye codes ko copy karke ]]></b:skin> tag ki upad paste kare.

.ripple {
    text-align: center;
    display: inline-block;
    padding: 4px 30px;
    border-radius: 2px;
    letter-spacing: .5px;
    border-radius: 2px;
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    position: relative;
    z-index: 0;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
a.ripple{color:#FFF;text-decoration:none;font-family:"Roboto",sans-serif}
a.yellow{color:#000}
.ripple:hover{box-shadow:0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15)}
.ink {
    display: block;
    position: absolute;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 100%;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}
.animate {
    -webkit-animation: ripple 0.55s linear;
    -moz-animation: ripple 0.55s linear;
    -ms-animation: ripple 0.55s linear;
    -o-animation: ripple 0.55s linear;
    animation: ripple 0.55s linear;
}
@-webkit-keyframes ripple{
  100%{opacity:0;-webkit-transform:scale(2.5)}
}
@-moz-keyframes ripple{
  100%{opacity:0;-moz-transform:scale(2.5)}
}
@-o-keyframes ripple{
  100%{opacity:0;-o-transform:scale(2.5)}
}
@keyframes ripple{
  100%{opacity:0;transform:scale(2.5)}
}
.red{background-color:#F44336}
.pink{background-color:#E91E63}
.blue{background-color:#2196F3}
.cyan{background-color:#00bcd4}
.teal{background-color:#009688}
.yellow{background-color:#FFEB3B}
.orange{background-color:#FF9800}
.brown{background-color:#795548}
.grey{background-color:#9E9E9E}
.black{background-color:#000000}

.red:before,.pink:before,.blue:before,.cyan:before,.teal:before,.yellow:before,.orange:before,.brown:before,.grey:before,.black:before{color:#FFF;font-size:16px;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;margin-right:5px}
.red:before{content:"\f06e"}
.pink:before{content:"\f019"}
.blue:before{content:"\f07a"}
.cyan:before{content:"\f06e"}
.teal:before{content:"\f019"}
.yellow:before{content:"\f07a";color:#000}
.orange:before{content:"\f06e"}
.brown:before{content:"\f019"}
.grey:before{content:"\f07a"}
.black:before{content:"\f06e"}

Step 4. Dobara keyboard mein se CTRL+F key press karke </body> tag search kare aur niche ki codes ko copy karke </body> tag ki upad paste karde.

<script type='text/javascript'>
//<![CDATA[
$(function() {
    var ink, d, x, y;
    $(".ripple").click(function(e) {
        if ($(this).find(".ink").length === 0) {
            $(this).prepend("<span class='ink'></span>");
        }
        ink = $(this).find(".ink");
        ink.removeClass("animate");
        if (!ink.height() && !ink.width()) {
            d = Math.max($(this).outerWidth(), $(this).outerHeight());
            ink.css({
                height: d,
                width: d
            });
        }
        x = e.pageX - $(this).offset().left - ink.width() / 2;
        y = e.pageY - $(this).offset().top - ink.height() / 2;
        ink.css({
            top: y + 'px',
            left: x + 'px'
        }).addClass("animate");
    });
});
//]]>
</script>

Step 5. Finally, Save Template button click kare.

Post Mein Material Design Ripple Animated Button Kaise Jore?


Simple steps.

Step 1. Naya post create kare ya purane post ko edit kare.

Step 2. Abh post ko HTML view mein open kare.

material-design-ripple-animated-buttons-blogger-hindi

Step 3. Uske baad, apko jaha pe buttons jorna hai waha pe niche diye gaye codes ko paste kare.

<a class="ripple red" href="#">Button</a>
<a class="ripple pink" href="#">Button</a>
<a class="ripple blue" href="#">Button</a>
<a class="ripple cyan" href="#">Button</a>
<a class="ripple teal" href="#">Button</a>
<a class="ripple yellow" href="#">Button</a>
<a class="ripple orange" href="#">Button</a>
<a class="ripple brown" href="#">Button</a>
<a class="ripple grey" href="#">Button</a>
<a class="ripple black" href="#">Button</a>

Step 4. Finally, post ko publish karke visit karne pad apko apki post mein material design ripple animated buttons najar aega.

Customizations


1. Upad ki CSS codes mein se Blue color wale codes ko modify karke ap buttons ki color change kar sakte hai.

2. Red color ki codes Font Awesome ki unicodes hai. In codes ko change karke ap button mein mojut icon ko change kar paenge. Font Awesome ki official website mein ap sabhi icons ki unicodes dekh sakte hai.

3. Agar ap buttons mein Ripple Animation Effect nehi dena chahte hai to 2nd wale javascript codes ko skip karde.

Thats it.

Read Also:
1. Successful Blogger Banne Ka 5 Secrets.
2. Daily 10,000 Blog Visitors Pane Ki 7 Traffic Tips.
3. Earning Report Ke Sath India Ki Top 10 Bloggers.
4. Bloggers Ke Liye Top 5 Free WordPress Hosting Providers.

Mujhe lagta hai Material Design Wale Ripple Animated Buttons ko jab ap apne blog mein jorenge tab apko aur apke readers ko ye buttons pasand ayega. Agar apko ise apne blog mein jorne mein koi parishani hui ya apko samajhne mein parishani ho rahi hai to ap niche comment karke mujhe bata sakte hai. Mai apki help karunga. Happy Designing!

SHARE THIS

Author:

I'm an 18 years aged Passionate Blogger from West Bengal, India. I just love to write articles and share them with people. The day was 28th September 2015, when my dream of having a website comes true and I made this website to help you and peoples like you!

Previous Post
Next Post