Sample code sharing on how to use CSS3+JS to draw various buttons

I think the drawing of buttons is divided into the following three steps

• The first step is to draw the outline of the button

• Choose the appropriate one html tag, set the outline CSS

##

/* html代码 */  body{ background-color: #E6C9B6; } /* CSS样式 */ /* 按钮轮廓 */ .button{ display: block; margin:100px auto; position: relative; width:100px; height:40px; border-radius: 50px; border:1px solid #fff; background-color: #E9E4E0; }

Copy after login

• The second step is to draw the default state of the button

• This step is very important because we will not add any more to the html file Other tags, so we need to use the :after pseudo-class to render the button with 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; //按钮的动画时长 }

  Copy after login
  In fact, after doing this step, you will find that the effect on the browser has not changed at all, it is still the same as before , but don’t worry, it will be obvious if we add a little something

• Add a small button within the outline

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

  Copy after login
  The default is off

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

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

##imitate IOS-3. jpg

The last step is to write JS code to switch

• In fact, among CSS switches, toggleClass is the most convenient.

  but! ! !

  This switching method cannot switch the JS event you want to trigger.
  After all, we draw buttons to complete certain functions,
  So I adopted this method, but it may not be the best
  

  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; } });

  Copy after login
  
  At this point, a complete switch button has been drawn
  Thank you for spending 3 to 5 minutes reading my unprofessional tutorial

  
  

PS: Yesterday I was going to draw a button to control the light bulb switch (actually switching the background image), and then I looked around and saw a bull switch on the wall. Since it controls the light, I wanted to play with the simulated switch. I endured the drowsiness at noon and reluctantly drew it

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

##Simulation switch.jpg

Simulation-2.jpg

PS:我引用了一个初始化的CSS文件，可能需要 box-sizing:border-box;  /* JS代码 */ 

The above is the detailed content of Sample code sharing on how to use CSS3+JS to draw various buttons. For more information, please follow other related articles on the PHP Chinese website!