html - radio效果实现

问题描述

问 题

类似这样的radio怎么实现

解决方案

<style>

.btn-warp {
    height: 200px;
    width: 400px;
    background: #21203b;
    padding: 40px;
}
.btn-warp .btn {
    float: left;
    padding: 0px 30px 0px 30px;
    font-size: 16px;
    color: white;
    line-height: 32px;
    height: 32px;
    text-align: center;
    background: #2c2b4b;
    box-shadow: 0px 0px 4px 0px #2c2b4b;
    border-radius: 20px;
    margin-right: 20px;
    cursor: pointer;
}
.btn-warp .btn_active {
    background: #6061ae;
}

</style>

<div class="btn-warp">

<div class="btn">交易金额</div>
<div class="btn btn_active">交易笔数</div>

</div>

这篇关于html - radio效果实现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！