• ✅ (Đã xác minh)
  • Tạo nút Demo và Download với hiệu ứng gơn sóng (wave) đẹp mắt

    Như các bạn đã biết, việc thiết kế blogspot hiện nay nó không chỉ là vấn đề chức năng nữa mà nó còn phải thêm vấn đề thẩm mỹ của mỗi cá nhân.

    Tạo nút Demo và Download với hiệu ứng gơn sóng (wave) đẹp mắt

    Hôm nay, mình chia sẻ đến các bạn cách Tạo nút Demo và Download với hiệu ứng gơn sóng (wave) đẹp mắt. Khi click vào nút chúng ta sẽ thấy hiệu ứng:
    Live Demo

    Hướng dẫn

    Đầu tiên Mở Blogger > Nhấp vào nút Chỉnh sửa HTML > Trình chỉnh sửa code.
    Thêm CSS bên dưới trước mã ]]> </ b: skin> hoặc cặp thẻ <style>...</style>
    /* 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)}}

    Sau đó thêm mã jQuery này trước mã </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>

    Và đây là HTML hiển thị trong bài đăng của bạn
    <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>

    Trên đây là bài viết hướng dẫn Tạo nút Demo và Download với hiệu ứng gơn sóng (wave) đẹp mắt cho blogspot. Hy vọng các bạn sẽ thích nó.

    1 Comments

    Cùng chuyên mục

    Service & High Quality Anh Trai Nang Blogger

    Powered by BFGMedia

    Chuyên dịch vụ dành cho blogspot
    và mạng xã hội

    Facebok Service

    Tăng like, tăng theo dõi Fanpage và Facebook cá nhân

    Blogspot Service

    Thiết kế, tặng template blogspot, miễn phí hosting vĩnh viễn

    Truyền Thông

    Hợp tác nội dung truyền thông, phát triển tin tức mạng

    Unlock Domain

    Nhận mở chặn link chia sẻ trên Facebook giá rẻ

    Unlimited Colors

    Customize the Skin of the template with Unlimited Color Options

    Google Analytics

    Place your Tracing Code like Google Analytics Only in few options

    Social Sharing

    100% Compatible with 200+ Social Sharing Websites

    Fully Responsive

    Full Compatibility with all Devices like Mobile, Tablet and Desktop

    No Coding Required

    Customize your Website with No Coding Knowledge Required