Zibll子比主题悬浮按钮美化教程（二）

前言

Zibll子比主题悬浮按钮美化教程（一）

2022年5月10日

0630

从上章我们了解悬浮按钮美化，这次是不一样的美化教程。

和大家分享个CSS代码美化子比主题自带的悬浮按钮样式把，其实就是把它自带的按钮改变成彩色按钮也没啥，所以这篇教程非常的简单，看教程吧。

教程开始

1.直接把下面代码放在子比主题后台自定义CSS代码 然后这里我就不多说了 相信用子比主题的人 这个都会弄这个东西，这里注意的是如果放了还不显示效果就是你这个CSS和其他的CSS代码有冲突，自己排查下就可以了。

/*自定义子比浮窗样式*/
.wiiuii-zbfc-sty{display:flex;flex-direction:column;align-items:center;justify-content:center}
.wiiuii-zbfc-img{border-top-left-radius:8px;border-top-right-radius:8px}
.wiiuii-zbfc-sty>a{width:100%}
.wiiuii-zbfc-btn{color:#000;text-align:center;background:linear-gradient(288deg,#ffb6b9 0,#ffb6b9 35%,#fae3d9 calc(35% + 1px),#fae3d9 45%,#bbded6 calc(45% + 1px),#bbded6 65%,#61c0bf calc(65% + 1px),#61c0bf 100%);width:100%;padding:10px;margin-top:5px;border-bottom-right-radius:8px;border-bottom-left-radius:8px}
.wiiuii-zbfc-btn:hover{color:#fff;background:linear-gradient(123deg,#461b93 0,#461b93 40%,#6a3cbc calc(40% + 1px),#6a3cbc 60%,#8253d7 calc(60% + 1px),#8253d7 70%,#f78f1e calc(70% + 1px),#f78f1e 100%)}