[詩語]

這是客户需要的一個效果，想了好久都不知道怎麼去實現，找相關的插件和代碼發現很累贅，最後找了一圈想着是不是 CSS 就可以做到，測試了下確實可以。這裏公佈一下方法，也是給自己做做筆記記錄。

1 、先新建一個框架和按鈕，直接拖動主題的內置模塊即可。

2 、編輯好按鈕的內容和樣式；

3 、使用以下 css 代碼：

.fusion-button.button-4 {
    box-shadow: 0 5px 15px rgba(240, 129, 115, 0.45)!important;
    position: fixed;
    font-size: 25px;
    top: 35%;
    right: 20%;
    display: block;
}
.fusion-button.button-4:hover, .fusion-button.button-4:focus, .fusion-button.button-4:active {
    box-shadow: 0 5px 15px rgba(240, 129, 115, 0.45)!important;
    position: fixed;
    top: 35%!important;
    right: 20%!important;
    display: block;
}

4 、修改這個 .button-4 為你自己的比如 .button-1 、.button-2；

5 、如果要調整按鈕位置的話可以修改下面的參數；

    top: 35%!important;
    right: 20%!important;

6 、然後該有的就都有了，非常方便。也算是折騰着玩兒吧，就是稍微麻煩點，花了不少時間。

[詩語]

再補充下，上面的按鈕是因為頁面上一個有四個按鈕，這個是最後一個所以是 .button-4 這個按自己的實際情況進行調整就行了 。

另外這個按鈕模塊可以在手機上隱藏，不至於太佔版面。

[作者]

帖子