教你用CSS3/JS绘制自己想要的按钮

绘制按钮其实很简单，只不过对于还没自己动手绘制的“新人”来说，会有一点不知所措的感觉（其实我前天就是如此）；
为了方便大家的学习，我决定写篇基础教程来为web界做一点小小的共贡献

• 第一步，绘制按钮的轮廓

• 选择合适的html标签，设置轮廓的CSS

body{
    background-color: #E6C9B6;
}.button{
    display: block;
    margin:100px auto;
    position: relative;
    width:100px;
    height:40px;
    border-radius: 50px;
    border:1px solid #fff;
    background-color: #E9E4E0;
}

效果图

仿IOS-1.jpg

• 第二步，绘制按钮的默认状态

• 这一步很重要，由于我们不会再给html文件添加其他的标签，所以我们需要用 :after 伪类对按钮进行CSS渲染

.button:after{
        display: block;
        position: absolute; //相对按钮的轮廓进行决定定位
        top:2px;
        bottom: 2px;        //即设置top,又设置bottom使元素自动拉伸到最大
        left:2px;          //实际上，按钮的宽度即为容器的高度-(top+bottom)
        width:36px;        //按钮的宽度
        line-height: 36px;  //按钮文字的高度，如果不需要文字，可移除
        text-align: center;
        text-transform: uppercase;
        font-size: 16px;
        background-color: #fff;   //这里的背景颜色是按钮的背景颜色
        border:2px solid;
        transition: all 500ms;      //按钮的动画时长}

实际上，做到这一步之后会发现，在浏览器上的效果没有一点变化，还是之前的那样子，不过不用着急，我们再加一点东西就很明显了

• 在轮廓内添加小按钮

.off:after {        content: 'off';        border-radius:30px;        color: #999;
}

默认为off状态

仿IOS-2.jpg

- 再接着绘制要切换的状态

.on:after {          content: 'ON';          border-radius:30px;          transform: translate(56px, 0);   
          color:transparent;          background-color:#4BD429;
        }

仿IOS-3.jpg

• 最后一步，写JS代码进行切换

实际上，在CSS的切换之中，toggleClass是最为方便的。
但是！！！
这种切换方法不能切换你要触发的JS事件，
毕竟，我们画按钮是为了完成某些功能，
所以我采用的是这种方式,但也许并不是最好的

var zn=0;
$('.button').click(function(e){    if(zn==1){
        $(this).removeClass("on").addClass("off");        //此处可填要触发的事件
        zn=0;
    }else{
        $(this).removeClass("off").addClass("on");         //此处可填要触发的事件
        zn=1;
    }
});

到此，一个完整的开关按钮就绘制完成了
感谢你能花3~5分钟的时间阅览我不专业的教程

  绘制过程并不复杂，我也就不细说了，贴下效果图和代码，感兴趣的可以自行看一下

仿真开关.jpg

仿真-2.jpg

PS:我引用了一个初始化的CSS文件，可能需要
box-sizing:border-box;
    
    .button{        display: block;        position: relative;        width:160px;        height:180px;        border-radius: 5px;        background-color: #f1f1f1;
    }    .button2{        display: block;        position: relative;        width:160px;        height:180px;        border-radius: 5px;        background-color: #f1f1f1;
    }    
    .indicate{        display: block;        position: absolute;        margin:60px 0 0 70px;        width: 20px;        height: 4px;        border-radius: 2px;        background-color: #A8C1C2;        z-index: 1;        transition: all 200ms;
    }    .indicate_yes{        margin:69px 0 0 70px;        background-color: #A3D7E7;
    }    
    .button:after{        display: block;        position: absolute;        top:40px;        bottom: 40px;        left:20px;        right:20px;        line-height: 52px;        border:1px solid #FFF;        transition: all 200ms;
    }    .button2:after{        display: block;        position: absolute;        top:49px;        bottom: 31px;        left:20px;        right:20px;        line-height: 52px;        border:1px solid #FFF;        transition: all 200ms;
    }    
    .on:after {      content: '';      border-radius: 5px;      
      background: linear-gradient(#fff, #f2f2f2 80%,#fff);      
      box-shadow: 0 1px 0 0 #fff,        0 3px 0.5px 0 #E7E9EA,        0 5px 0.5px 0 #DEDFDF,        0 6px 0.5px 0 #CCCCCD,        0 7px 0.5px 0 #C5C7C7,        0 8px 2px 0 #818283,        0 9px 2px 0 #A7A8A8;
    }    
    .off:after {      content: '';      border-radius: 5px;      background: linear-gradient(#fff, #f2f2f2 80%,#fff);      box-shadow: 0 -1px 0 0 #fff,        0 -3px 0.5px 0 #E7E9EA,        0 -5px 0.5px 0 #DEDFDF,        0 -6px 0.5px 0 #CCCCCD,        0 -7px 0.5px 0 #C5C7C7,        0 -8px 2px 0 #818283,        0 -9px 2px 0 #A7A8A8;
    }     

作者：倀空
链接：https://www.jianshu.com/p/a5635cf07cf4