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

Anh Trai Nắng
3
Hướng dẫn Tạo nút Demo và Download với hiệu ứng gơn sóng (wave) đẹp mắt nằm trong mục Thủ thuật blogspot.

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
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:

(getButton) #text=(Live Demo) #icon=(link)

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ó.

Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

3 Nhận xét

Đăng nhận xét

#buttons=(Thanks!) #days=(7)

À mình có làm website tăng tương tác MXH giá rẻ. Mọi người nếu cần thì ghé sử dụng các dịch vụ thử nha. Ghé xem dịch vụ
Ok, Go it!

HƯỚNG DẪN BÌNH LUẬN

Chèn link

Sử dụng công cụ Tạo link

Chèn hình ảnh

LINK_ANH - sử dụng công cụ upload ảnh. Và chỉ cần lấy link ảnh chèn vào bình luận là ảnh tự động hiển thị.

Định dạng chữ

<b>Chữ in đậm</b>
<i>Chữ in nghiêng</i>
<u>Chữ gạch chân</u>
<strike>Chữ gạch ngang</strike>

Chèn một đoạn Code

Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

Khác

Nhập Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

Đã hiểu