实现按钮组CSS

PanDa____

已于 2023-09-19 17:19:07 修改

阅读量98

点赞数

分类专栏： CSS 文章标签：前端 css html

于 2023-09-19 17:11:09 首次发布

本文链接：https://blog.csdn.net/PanDa____/article/details/133036541

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

鼠标经过时，左右边框依然是一像素。

<ul class="buttonGroup">
    <li class="active">Request Amount</li>
    <li>Success Amount</li>
    <li>Number Of Bill</li>
    <li>Success Rate</li>
</ul>

.buttonGroup {
    display: flex;
}
.buttonGroup li {
    display: inline-block;
    padding: 7px 16px;
    position: relative;
    border-top: 1px solid #D9D9D9;
    border-bottom: 1px solid #D9D9D9;
    border-right: 1px solid #D9D9D9;
    cursor:pointer;
}
.buttonGroup li:first-of-type {
    border-left: 1px solid #D9D9D9;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.buttonGroup li:last-of-type {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.buttonGroup li + li:before {
    content: '';
    width: 1px;
    height: 100%;
    display: block;
    position: absolute;
    top: 0px;
    left: -1px;
    z-index: 1;
}
.buttonGroup li:hover, .buttonGroup li:active,.buttonGroup li.active {
    border-color: #0C66FF;
    color: #0C66FF;
}
.buttonGroup li + li:hover:before, .buttonGroup li + li:active:before, .buttonGroup li + li.active:before {
    background-color: #0C66FF;
}