Hướng dẫn tạo nút Sticky Share Buttons cho themes Flatsome

Nút Sticky Share Buttons này mình tạo thuần bằng HTML và CSS, đơn giản – gọn – nhẹ nhưng vẫn đảm bảo sang – xịn – mịn và bắt mắt. Các bạn có thể tham khảo demo ngay tại blog của mình.

Dưới đây là toàn bộ đoạn code HTML kèm CSS tạo nút Sticky Share Buttons, các bạn chỉ cần coppy lại và dán vào sau cùng file functions.php trong thư mục child-theme là được.

function sticky_share_button_congnghe360(){?> 
<style>
.mws-wrapper {
    position: fixed;
    bottom: 5px;
    right: 0;
    z-index: 9999;
}
.mws-checkbox {
    display: none !important;
}
.mws {
    width: 60px;
    height: 60px;
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin: 0;
    border-radius: 50%;
    background: #007cba;
    box-shadow: 0 6px 9px rgb(0 0 0 / 16%), 0 3px 6px rgb(0 0 0 / 23%);
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 1000;
    -webkit-transition: all .15s cubic-bezier(.15,.87,.45,1.23);
    transition: all .15s cubic-bezier(.15,.87,.45,1.23);
}
.mws-checkbox:checked~.mws {
    -webkit-transition: all .15s cubic-bezier(.15,.87,.45,1.23);
    transition: all .15s cubic-bezier(.15,.87,.45,1.23);
    width: 30px;
    height: 30px;
    right: 26px;
    bottom: 35px;
}
[class*=icon-cps-] {
    background-image: url(https://congnghe360.com/wp-content/uploads/2021/08/icon-contact.png)!important;
    background-repeat: no-repeat;
    background-size: 148px;
}
.icon-cps-mws-menu {
    width: 40px;
    height: 40px;
    background-size: 200px;
    background-position: 3px -33px;
}
.mws-checkbox:checked~.mws .icon-cps-mws-menu {
    width: 20px;
    height: 20px;
    background-size: 100px;
    background-position: -83.5px -15px;
}
.mws-wheel {
    width: 300px;
    height: 160px;
    position: absolute;
    bottom: 200px;
    right: -228px;
    transform: scale(0);
    transform-origin: 10% 200%;
    transition: all .3s ease;
    z-index: 12;
}
.mws-checkbox:checked~.mws-wheel {
    transform: scale(1);
}
.mws-wheel .mws-action {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    position: absolute;
    text-decoration: none;
}
.mws-share-button {
    width: 60px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
    font-size:15pt;
    padding: 14px;
    transition: all 1s ease;
    overflow: hidden;
}  
.mws-checkbox:not(:checked)~.mws {
    animation-name: zoom;
    -webkit-animation-name: zoom;
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    cursor: pointer;
    box-shadow: 0 0 0 0 #007cba;
}
@-webkit-keyframes tada {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
   
    10%,20% {
        -webkit-transform: scale(.9) rotate(-3deg);
        transform: scale(.9) rotate(-3deg)
    }
   
    30%,50%,70%,90% {
        -webkit-transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg)
    }
   
    40%,60%,80% {
        -webkit-transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg)
    }
   
    100% {
        -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }
}
@keyframes tada {
    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
   
    10%,20% {
        -webkit-transform: scale(.9) rotate(-3deg);
        -ms-transform: scale(.9) rotate(-3deg);
        transform: scale(.9) rotate(-3deg)
    }
   
    30%,50%,70%,90% {
        -webkit-transform: scale(1.1) rotate(3deg);
        -ms-transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg)
    }
   
    40%,60%,80% {
        -webkit-transform: scale(1.1) rotate(-3deg);
        -ms-transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg)
    }
   
    100% {
        -webkit-transform: scale(1) rotate(0);
        -ms-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }
}
@-webkit-keyframes zoom {
    0% {
        transform: scale(.9)
    }
   
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 15px transparent
    }
   
    100% {
        transform: scale(.9);
        box-shadow: 0 0 0 0 transparent
    }
}
@keyframes zoom {
    0% {
        transform: scale(.9)
    }
   
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 15px transparent
    }
   
    100% {
        transform: scale(.9);
        box-shadow: 0 0 0 0 transparent
    }
}
@media only screen and (max-width: 849px) {
.mws-share-button {
    height: 390px;;
    font-size:15pt;
} 
.mws-wheel {
    bottom: 270px;
}
}
</style>
<div class="mws-wrapper">
   <input id="mwsCheckbox" type="checkbox" class="mws-checkbox">
   <label class="mws" for="mwsCheckbox">
      <i class="icon-cps-mws-menu"></i>
   </label>
   <div class="mws-wheel">
      <div class="mws-action">
         <div class="mws-share-button">
         <?php echo do_shortcode( '[share]' );
         ?>
         </div>
      </div>
   </div>
</div>
<?php };
add_action('wp_footer','sticky_share_button_congnghe360');

Các bạn có thể dùng đoạn CSS dưới đây để điều chỉnh lại vị trí nút Back To Top nếu cần.

/*** adjusted back-to-top position ***/
.back-to-top {
    bottom: 90px;
    right: 18px;
}

Ngoài cách dán vào file functions.php, các bạn cũng có thể coppy từ dòng số 2 đến 211. Thay thế dòng số 205 – 208 bằng đoạn HTML bên dưới, rồi dán toàn bộ vào “FOOTER SCRIPTS” là được.

    
<div class="mws-share-button">[share style="fill"]</div>

Trong quá trình thực hiện, nếu có thắc mắc nào, các bạn có thể để lại bình luận cho mình phía dưới bài viết.

Chúc các bạn thành công!