Tạo button share hiệu ứng đẹp cho blogger

 Hello các bạn. Hôm nay mình sẽ chia sẻ cho các bạn 1 button Share bài viết với hiệu ứng cực đẹp dạng mở Tab.

DEMO

Để làm được nó rất đơn giản chỉ cần thêm đoạn code sau vào nơi muốn hiển thị trong theme của bạn:

<style>
 .share-btn {
 position: absolute;
 background-color: #f7f7f7;
 ;
 border-radius: 100px;
 width: 200px;
 height: 72px;
 box-shadow: 0 5px 10px rgba(0, 0, 40, 0.03);
 transition: all 0.4s cubic-bezier(0.3, 0, 0, 1.3);
 overflow: hidden;
cursor: pointer;
 top: 50%;
 left: 50%;
 transform: translateX(-50%) translateY(-50%);
 font-family: Roboto;
 }
 .share-btn .cta {
 position: absolute;
color: #f5ce67;
 text-transform: uppercase;
 font-size: 22px;
 letter-spacing: 1px;
transition: all 0.25s ease-in-out;
 top: 50%;
 left: 50%;
 transform: translateX(-50%) translateY(-50%);
 }
 .share-btn .close {
 position: absolute;
right: 38px;
 top: 31px;
 cursor: pointer;
 color: #cfd2d9;
 font-size: 20px;
opacity: 0;
 transition: all 0.4s cubic-bezier(0.3, 0, 0, 1.3);
 transform: rotate(-45deg);
 transform-origin: center center;
 }
 .share-btn .social {
 width: 70%;
 padding-left: 0;
 list-style-type: none;
 margin: 75px auto 0 auto;
 }
 .share-btn .social span {
 float: right;
 }
 .share-btn .social li {
 padding-bottom: 15px;
transform: scale(0.7) translateX(10px) translateY(-10px);
 transition: all 0.25s ease-in-out;
 transform-origin: 0% 0%;
 opacity: 0;
 }
 .share-btn .social li:nth-child(1) {
 color: #3b5998;
 }
 .share-btn .social li:nth-child(2) {
 color: #55acee;
}
 .share-btn .social li:nth-child(3) {
 color: #d34836;
 }
 .share-btn .fake-input {
width: 60%;
 margin: 10px auto 0 auto;
 background-color: #f3f6fb;
 color: #b2b5bc;
border-radius: 10px;
 padding: 15px;
 font-size: 15px;
 overflow: hidden;
 }
 .clicked {
 width: 260px;
 height: 270px;
 border-radius: 50px;
 cursor: auto;
 }
 .share-btn.clicked .cta {
 left: 40px;
 top: 30px;
 transform: translateX(0) translateY(0);
color: #cfd2d9;
 }
 .share-btn.clicked .close {
 opacity: 1;
 transform: rotate(0deg);
 }
 .share-btn.clicked .social li {
 transform: scale(1) translateX(0) translateY(0);
 opacity: 1;
 }
 .share-btn.clicked .social li:nth-child(1) {
transition-delay: .05s;
 }
 .share-btn.clicked .social li:nth-child(2) {
 transition-delay: .1s;
 }
 .share-btn.clicked .social li:nth-child(3) {
 transition-delay: .15s;
 }
 
 </style>
 <div class="share-btn">
 <span class="cta">Share</span>
 <div class="close"><i class="fa fa-times" aria-hidden="true"></i></div>
 <ul class="social">
 <li><a style="color: #3d4be2" expr:href='&quot;http://www.facebook.com/sharer/sharer.php?u=&quot; + data:blog.url' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'>Facebook<span>12</span></a></li>
 <li><a style="color: #a3d8ff" expr:href='&quot;http://twitter.com/home?status=&quot; + data:blog.url' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=436&quot; ); return false;' rel='nofollow'>Twitter<span>50</span></a></li>
 <li><a style="color: #ff0f02" expr:href='&quot;https://plus.google.com/share?url=&quot; + data:blog.url' onclick='javascript:window.open(this.href,&quot; &quot; ,&quot; menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot; ); return false; ' rel='nofollow'>Google +<span>248</span></a></li>
 </ul>
 <div class="fake-input"><data:blog.url/></div>
 </div>
 
 
 
 <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >
 $('.share-btn').click(function(){
 $(this).addClass("clicked");
 });
 
$('.close').click(function (e) {
 $('.clicked').removeClass('clicked');
e.stopPropagation();
 });
 
 </script>

Lại một thủ thuật nữa mình chia sẻ. Hi vọng với button Share này sẽ làm blog bạn trở nên chuyên nghiệp hơn.
Chúc các bạn thành công !

Share this post

La Ngọc Hưng

Chào các bạn đến với blog truyện tổng hợp của mình nhé !

Facebook

WhatsApp

Instagram

Subscribe Our Newsletter

Posting Terkait