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>
效果图：