[诗语]

这是客户需要的一个效果，想了好久都不知道怎么去实现，找相关的插件和代码发现很累赘，最后找了一圈想着是不是 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 这个按自己的实际情况进行调整就行了 。

另外这个按钮模块可以在手机上隐藏，不至于太占版面。

[作者]

帖子