css:
.lf{float:left} .btn{ width:60px; height:24px; color:#fff; border-radius:4px; cursor:pointer; border:none } .btn-group>button{color:#333;border-color:#ccc} .btn-group>button:not(:first-child):not(:last-child){border-radius:0} .btn-group>button:first-child:not(:last-child){ border-top-right-radius:0; border-bottom-right-radius:0; border-right:1px solid #ddd; } .btn-group>button:last-child:not(:first-child){ border-top-left-radius:0; border-bottom-left-radius:0; border-left:1px solid #ddd; } .btn-group>button.active{ color:#fff; background:#87CF7B }
html:
<span class="btn-group"> <button class="btn lf active">每月</button> <button class="btn lf">整点</button> </span>
效果图：
转载于:https://www.cnblogs.com/pengfei25/p/8392549.html
相关资源：css选择按钮组