用CSS如何做一个右侧的悬浮客服按钮？

发布时间：2023-08-12 13:52:59 所属栏目：语言来源：

导读：很多营销网站都有在线客服的功能，如果有细心的朋友会发现，很多都是做的悬浮客服按钮样式，那么这样的按钮效果究竟是怎样做的呢？这篇就给大家来分享一下实现代码，下文主要是使用CSS实现的，实现效果如下：

<d

很多营销网站都有在线客服的功能，如果有细心的朋友会发现，很多都是做的悬浮客服按钮样式，那么这样的按钮效果究竟是怎样做的呢？这篇就给大家来分享一下实现代码，下文主要是使用CSS实现的，实现效果如下：

<div class="sideBar">

    <div>

        <div class="tips">在线客服</div>

        <ul class="list">

            <li>QQ:1846492969</li>

            <li>QQ:1846492969</li>

            <li>QQ:1846492969</li>

            <li>QQ:1846492969</li>

            <li>QQ:1846492969</li>

        </ul>

    </div>

</div>

.sideBar {

position:fixed;

right:-182px;

top:50px;

background-color:#ffffff;

border:#eea236 solid 1px;

transition:right 0.5s;

border:solid 1px red;

}

.sideBar:hover {

right:0;

}

.sideBar>div {

position:relative;

}

.sideBar .tips {

position:absolute;

height:120px;

line-height:25px;

background-color:#eea236;

width:40px;

left:-40px;

top:50px;

text-align:center;

box-sizing:border-box;

padding:10px 10px;

border-top-left-radius:5px;

border-bottom-left-radius:5px;

font-weight:bold;

color:#ffffff;

}

.sideBar .list {

padding:0;

list-style:none;

width:180px;

margin:0;

}

.sideBar .list>li {

padding:15px;

border-top:#eea236 dashed 1px;

}

.sideBar .list>li:hover {

background-color:#f0ad4e;

color:#ffffff;

}

.sideBar .list>li:first-child {

border-top:none;

}

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!