CSS 手写按钮

CSS 手写按钮

1. HTML部分

<template>
    <div id="index" @click="checked">
        <div class="btn btnOff" v-if='isChecked'>
            <div class="raio"></div>
            <div class="txt">off</div>
        </div>
        <div class='btn btnOn' v-else>
            <div class="txt onTxt">on</div>
            <div class="raio onColor"></div>
        </div>
    </div>
</template>

2.js部分

export default {
   data() {
       return {
           isChecked: true
       }
   },
   methods: {
       checked() {
           if(this.isChecked) {
               this.isChecked = false
           }else {
               this.isChecked = true
           }
           
       }
   }
}

3. CSS部分

<style scoped>
    #index {
        height: 100px;
    }

    #index .btn {
        background: #ffffff;
        width: 360px;
        height: 180px;
        border: 1px solid #c6ccd2;
        border-radius: 50px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center; 
        cursor: pointer;
    }

    #index .btnOff {
        padding: 0 70px 0 20px;
        transition: padding 2s;
    }

    #index .btnOn {
        padding: 0 20px 0 70px;
        transition: padding 2s;
    }

    #index  .btn .raio {/* off 圆 */
        width: 130px;
        height: 130px;
        border-radius: 130px;
        background: #c6ccd2;
    }

    #index .btn .onColor {/* on 圆 */
        background: #24aa98;
    }

    #index .btn .txt {/* off */
        font-size: 80px;
        color: #c6ccd2;
    }
    
    #index .btn .onTxt {/* on */
        color: #24aa98
    }
</style>

效果展示