TẠO BUTTON SHARE HIỆU ỨNG ĐẸP CHO BLOGSPOT
Xuất bản:
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.
Để 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='"http://www.facebook.com/sharer/sharer.php?u=" + data:blog.url' onclick='window.open(this.href,'sharer', 'toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow'>Facebook<span>12</span></a></li>
<li><a style="color: #a3d8ff" expr:href='"http://twitter.com/home?status=" + data:blog.url' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow'>Twitter<span>50</span></a></li>
<li><a style="color: #ff0f02" expr:href='"https://plus.google.com/share?url=" + data:blog.url' onclick='javascript:window.open(this.href," " ," menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600" ); return false; ' rel='nofollow'>Google +<span>248</span></a></li>
</ul>
<div class="fake-input"><data:blog.url/></div>
</div>