input license here

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ó.
Related Posts
Diệp Quân
Nguyen Manh Cuong is the author and founder of the vmwareplayerfree blog. With over 14 years of experience in Online Marketing, he now runs a number of successful websites, and occasionally shares his experience & knowledge on this blog.
SHARE

Related Posts

Subscribe to get free updates

Post a Comment

Sticky