手写css按钮组

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>

效果图：