Dark
    Template Updates

    Featured Post

    Create Demo Keys and Material Design Downloads

    Create Demo Keys and Material Design Downloads
    Creating Demo Keys and Material Design Downloads - As we know, now Material Design has become a trend as a web interface or UI (User Interface) both on mobile and desktop devices on a web page. This web interface is also welcomed by users and website developers because it has a myriad of useful features and a more attractive appearance.
    On this occasion Wiendhy will give an example of a demo and download button which is added with the ripple (wave) animation effect when we press the button which is one of the features such as animation effects from Material Design.

    Create Demo Keys and Material Design Downloads

    First Open Blogger> Click the Edit HTML button> Template Editor> Add CSS below before the code ]]></b:skin> or </style>
    /* Arlina Design Material Button */
    #wrap{margin:20px auto;text-align:center}
    #wrap a{text-decoration:none}
    .tombolripple{cursor:pointer!important;overflow:hidden;text-decoration:none;display:inline-block;-webkit-appearance:none;font-size:1.7em;border-radius:4px;color:rgba(255,255,255,0.8);font-weight:400;padding:20px 25px;margin:0 15px;box-shadow:0 2px 2px 1px rgba(0,0,0,0.1);transition:all 0.3s}
    .tombolripple:hover,.tombolripple:active{box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)}
    .tombolripple.tsatu{background:#e67e22}
    .tombolripple.tdua{background:#3498db}
    .tombolripple.tsatu:hover,.tombolripple.tsatu:active{background:#f49541}
    .tombolripple.tdua:hover,.tombolripple.tdua:active{background:#4aaff3}
    svg{position:absolute;top:0;left:0;width:100%;height:100%}
    circle{fill:rgba(255,255,255,0.07)}
    .ripple-effect{position:relative;overflow:hidden;-webkit-transform:translatez(0)}
    .teffect{display:block;position:absolute;pointer-events:none;border-radius:50%;transform:scale(0);background:#fff;opacity:0.5}
    .teffect.animate{animation:ripple-effect 0.5s linear}
    @keyframes ripple-effect{100%{opacity:0;transform:scale(2.5)}}
    @-webkit-keyframes ripple-effect{100%{opacity:0;transform:scale(2.5)}}

    For the color of the button and other functions you can readjust
    Then add this jQuery code before the code </body>
    <script type='text/javascript'>
    //<![CDATA[
    !function(a){a(".ripple-effect").click(function(b){var c=a(this);0===c.find(".teffect").length&&c.append("<span class='teffect'></span>");var d=c.find(".teffect");if(d.removeClass("animate"),!d.height()&&!d.width()){var e=Math.max(c.outerWidth(),c.outerHeight());d.css({height:e,width:e})}var f=b.pageX-c.offset().left-d.width()/2,g=b.pageY-c.offset().top-d.height()/2;d.css({top:g+"px",left:f+"px"}).addClass("animate")})}(jQuery);
    //]]>
    </script>
    The jQuery code functions to bring up the Ripple effect on the button
    then save the template.

    Now for the caller code, add the HTML code below in the post on the HTML tab (not compose)
    <div id="wrap">
    <a class="tombolripple tsatu ripple-effect" href="#" rel="nofollow" target="_blank">Demo</a>
    <a class="tombolripple tdua ripple-effect" href="#" rel="nofollow" target="_blank">Download</a>
    </div>
    Add the destination link to the marked code
    Finished! And see the results
    See the Pen Button with Ripple Effect by Wiendhy (@wiana) on CodePen.

    Not only on the button, the ripple effect above can be added to any tag in the other template markup section. You only need to add ripple-effects in the class in a tag like the example below


    You only need to give CSS tags overflow: hidden and position: relative to the wrap tag
    #wrapper{position:relative;overflow:hidden}
    #wrapper .child{......}

    <div id="wrapper">
    <span class="child ripple-effect" >Contoh</span>
    </div>
    That's the tutorial on how to Make Demo Buttons and Material Design Downloads. May be useful.
    DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi Anda membantu Admin untuk lebih giat lagi dalam membagikan template blog yang berkualitas. Terima kasih.
    Postingan Lebih Baru Postingan Lebih Baru Postingan Lama Postingan Lama

    Postingan lainnya

    Komentar

    Posting Komentar