Tạo nút Demo, Download và Buy Now phong cách Material Design với hiệu ứng Ripple độc đáo

Demo, Download & Buy Now button Material Design style with Ripple effect

Demo, Download và Buy Now là 3 nút bấm khá phổ biến đối với các website chia sẻ thủ thuật, phần mềm, bán sản phẩm... Hôm nay Iris Tips sẽ chia sẻ cho các bạn cách tạo trọn bộ bộ nút bấm này với phong cách Material Design hiện đại cùng hiệu ứng gợn sóng (ripple) độc đáo khi bạn bấm nào các nút đó.

Cách thực hiện

1Vào Chủ đề >> Chỉnh sửa HTML và dán đoạn CSS bên dưới vào trước thẻ ]]></b:skin>

.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none;}
.demobtn {display:inline-block;position:relative;font-family:'Source Sans Pro', Helvetica, sans-serif;font-size:14px;margin:0 3px;background:#3498db;color:#fff!important;padding:10px;text-transform:uppercase;border-radius:4px;box-shadow:0 3px 5px rgba(0,0,0,0.1);transition:all .3s}
.demobtn:hover {opacity: .8;box-shadow:0 5px 10px rgba(0,0,0,0.2)}
.demobtn:before {content:'\f1d8';display:inline-block;vertical-align:top;margin-right:10px;margin-top:-5px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
.downloadbtn {display:inline-block;position:relative;font-family:'Source Sans Pro', Helvetica, sans-serif;font-size:14px;margin:0 3px;background:#fc4f3f;color:#fff!important;padding:10px;text-transform:uppercase;border-radius:4px;box-shadow:0 3px 5px rgba(0,0,0,0.1);transition:all .3s}
.downloadbtn:hover {opacity: .8;box-shadow:0 5px 10px rgba(0,0,0,0.2)}
.downloadbtn:before {content:'\f019';display:inline-block;vertical-align:top;margin-right:10px;margin-top:-5px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
.buynowbtn {display:inline-block;position:relative;font-family:'Source Sans Pro', Helvetica, sans-serif;font-size:14px;margin:0 3px;background:#71DB00;color:#fff!important;padding:10px;text-transform:uppercase;border-radius:4px;box-shadow:0 3px 5px rgba(0,0,0,0.1);transition:all .3s}
.buynowbtn:hover {opacity: .8;box-shadow:0 5px 10px rgba(0,0,0,0.2)}
.buynowbtn:before {content:'\f07a';display:inline-block;vertical-align:top;margin-right:10px;margin-top:-5px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
.contactbtn {display:inline-block;position:relative;font-family:'Source Sans Pro', Helvetica, sans-serif;font-size:14px;margin:0 3px;background:#ecac00;color:#fff!important;padding:10px;text-transform:uppercase;border-radius:4px;box-shadow:0 3px 5px rgba(0,0,0,0.1);transition:all .3s}
.contactbtn:hover {opacity: .8;box-shadow:0 5px 10px rgba(0,0,0,0.2)}
.contactbtn:before {content:'\f003';display:inline-block;vertical-align:top;margin-right:10px;margin-top:-5px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
.ripplelink{position:relative;overflow:hidden;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;transition:all 0.2s ease;z-index:0}
.ink{display:block;position:absolute;background:rgba(255,255,255,0.3);border-radius:100%;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}
.animate{-webkit-animation:ripple 0.65s linear;-moz-animation:ripple 0.65s linear;-ms-animation:ripple 0.65s linear;-o-animation:ripple 0.65s linear;animation:ripple 0.65s linear}
@keyframes ripple{100%{opacity:0;transform:scale(2.5)}}

2Tìm đến thẻ </body> và dán đoạn Javascript sau đây vào trước thẻ đó

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

3Dán thư viên jQuery bên dưới vào trước thẻ </head> nếu website của bạn chưa có.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

4Khi đăng bài bạn hãy viết theo cú pháp sau

<div style="text-align: center;">
<ul class="button">
<li><a class="demobtn ripplelink" href="YOUR-LINK-HERE">DEMO</a></li>
<li><a class="downloadbtn ripplelink" href="YOUR-LINK-HERE">DOWNLOAD</a></li>
<li><a class="buynowbtn ripplelink" href="YOUR-LINK-HERE">BUY NOW</a></li>
<li><a class="contactbtn ripplelink" href="YOUR-LINK-HERE">CONTACT</a></li>
</ul> 
</div>
<div class="clear"></div>

• DEMO

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm