开关按钮样式(类似app端)

来源:互联网 发布:淘宝代购手机 编辑:程序博客网 时间:2024/06/06 06:47



css

.double_btn{

    width:100%;
    margin:0 auto;
    text-align:center;
    font-family: 微软雅黑;
    font-size:14px;
}
.double_btn_0{
    padding:8px 25px 8px 0;
    border-radius:20px;
    background-color:#EBEDED;
    cursor:pointer;
    color:#333333;
}
.double_btn_1{
    padding:8px 0 8px 25px;
    border-radius:20px;
    background-color:#EBEDED;
    cursor:pointer;
    color:#333333;
}
.single_btn_1{
    padding:8px 20px;
    border-radius:20px;
    background-color:#60C0F0;
    color:#ffffff;

}

===========================================

html

<div class="am-u-sm-12 height60 center">
        <div class="double_btn">
            <span class="double_btn_{$type}">
                <span <!--{if $type == 0}-->class="single_btn_1" style="margin-right:10px;"<!--{/if}-->>我的联系人</span>
                <span <!--{if $type == 1}-->class="single_btn_1" style="margin-left:10px;"<!--{/if}-->>全部联系人</span>
            </span>
        </div>
    </div>

原创粉丝点击