子比主题美化 – 新·悬浮按钮-李小白

效果

悬浮按钮是一种用户界面设计元素，它通常一直显示在屏幕上，无论用户如何滚动页面，都能轻易看到和操作这个按钮。这样的设计使得用户能够随时触发重要的操作，而无需滚动页面或寻找特定的菜单项。

例如，在内容较长的页面中，用户可能需要滚动页面来查看更多内容。如果他们想要执行某项重要操作，如返回页面顶部或提交表单，他们需要滚动回页面顶部或找到特定的操作按钮。但是，如果有悬浮按钮，用户可以直接点击这个按钮来执行操作，无论他们当前在页面的哪个位置。

因此，悬浮按钮能够简化用户操作，提高操作的便捷性，从而提升用户体验。同时，由于它的可见性高，也可以用来引导用户执行网站希望他们执行的操作，如购买产品、订阅服务等。

教程

/*悬浮按钮*/
.float-right.round .float-btn {
    position: relative;
    display: block;
    height: 56px;
    width: 56px;
    padding: 20px 4px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #FFD1D8;
    background-color: #ffffff;
    -webkit-box-shadow: 0 0 6px 0 #FFD1D8;
    -moz-box-shadow: 0 0 6px 0 #FFD1D8;
    box-shadow: 0 0 6px 0 #FFD1D8;
    cursor: pointer;
}
.fa-toggle-theme::after, .fa-toggle-theme::before {
    font-size: 18px;
}
.float-right.round:hover .float-btn:hover {
    -moz-box-shadow: 0 0 6px 0 #FFB5C3;
    box-shadow: 0 0 6px 0 #fc6976;
        background-color: #FFB5C3;
}
.float-btn .hover-show-con {
    right: 40px;
    margin-right: 25px;
}