CSS实现按钮点击效果

样式有点多，代码比较乱，看不懂直接复制运行

css样式

 body {
            background: #ccc;
        }
        
        .bottom {
            width: 350px;
            height: 130px;
            background: #fff;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -65px 0 0 -175px;
            border-radius: 10px;
            box-shadow: 1px 7px 10px 1px rgb(158, 149, 149);
        }

        img{
            width: 40px;
            height: 30px;
            opacity: .7;
        }
        .img1{
            position: absolute;
            left: 40px;
            top: 50%;
            margin: -15px 0 0 -15px;
        }
        .img2{
            width: 30px;
            position: absolute;
            right: 40px;
            top: 50%;
            margin: -15px 0  -15px 0;
        }
        /* 多选框与背景样式 */
        input,.center{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            margin-left: -50px;
            margin-top: -50px;
            box-shadow: 0 0 10px 10px transparent;
            background: #008EFA;
            transition: all .3s linear;
        }
        /* 蓝色背景层级提高 */
        .center{
            z-index: 1;
            
        }
        /* 十字型图标 */
        .center::after{
            content: '';
            position: absolute;
            width: 2px;
            height: 50px;
            background: #fff;
            left: 50%;
            top: 50%;
            margin-left: -1px;
            margin-top: -25px;
            transition: all .3s linear;
        }
        /* 十字型图标 */
        .center::before{
            content: '';
            position: absolute;
            width: 50px;
            height: 2px;
            background: #fff;
            left: 50%;
            top: 50%;
            margin-left: -25px;
            margin-top: -1px;
            transition: all .3s linear;
        }
        /* 多选框按钮层级提高与隐藏 */
        input{
            z-index: 3;
            opacity: 0;
        }
        /* 按钮背景后颜色 */
        .yincang{
            width: 130px;
            height: 65px;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            margin-left: -65px;
            /* margin-top: -15px; */
            background: #ccc;
            border-radius: 0 0 100px 100px;
        }

        /* 中间图片十字点击后旋转 */
        input:checked~.center::before,
        input:checked~.center::after{
            transform:  rotateZ(135deg);
        }

        /* 点击后背景颜色转换 */
        input:checked~.center{
            background: #FF207A;
        }
        .img3,.img4,.img5{
            width: 60px;
            height: 60px;
            position: absolute;
            left: 50%;
            /* top: 50%; */
            margin-left: -30px;
            margin-top: -30px;
            
        }

        /* 图标弹出延时 */
        .img3{
            transition: all .2s linear;
        }
        .img4{
            transition: all .35s linear;
        }
        .img5{
            transition: all .45s linear;
        }

        /* 图标弹出的位置 */
        input:checked~.img3{
            transform: translateY(-80px) translateX(-120px);
        }
        input:checked~.img4{
            transform: translateY(-120px) ;
        }
        input:checked~.img5{
            transform: translateY(-80px) translateX(120px);
        }

html

 <div class="bottom">
        
        <img src="../../图标/1225479.png" alt="1225479.png"  class="img1" title="列表">
        
        <img src="../../图标/1225492.png" alt="1225492.png" class="img2" title="搜索">
        
        <input type="checkbox">
        
        <img src="../../图标/1173469.png" alt="" class="img3">
        <img src="../../图标/xiang.png" alt="" class="img4">
        <img src="../../图标/1173463.png" alt="" class="img5">
        
        <div class="center">div>
        
        <div class="yincang">div>
    div>