Draw the button you want with CSS3/JS

I think the button's drawing is divided into the following three steps

• The first step is to draw the outline of the button
  • Select the appropriate HTML tag, set the outline of the CSS

/* HTML code */<A href=" #" class="button off" ></a>body{ background-color: #E6C9B6;} /* CSS style */* button contour */.button{ display:block; margin:100px auto; position:relative; width:100px; height:40px; Border-radius: 50px; border:1px solid #fff; Background-color: #E9E4E0;}              

Imitation ios-1.jpg

• Second step, draw the default state of the button
  • This step is important, because we will not add additional tags to the HTML file, so we need to use: after Pseudo-class button CSS rendering

    /* Continue writing on it */. button:after{Display:block;Position:absolute;Relative button profile to determine positioningTop2px;Bottom2px;Set top, set bottom to automatically stretch the element to the maximumleft:2PX; //in fact, the width of the button is the height of the container-(top+bottom) width: 36PX; //button width line-height: 36PX; Span class= "Hljs-comment" >//the height of the button text, if no text is required, remove text-align:center; text-transform:uppercase; font-size: 16PX; background-color:  #fff; //here the background color is the background color of the button border:2px Solid transition:all 500MS; //button animation duration}             

    In fact, this step will find that the effect on the browser does not change a bit, or the same as before, but do not worry, we add a little something is very obvious

  • Add a small button inside the contour

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

    The default is off state

Imitation ios-2.jpg

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

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

Imitation ios-3.jpg

• The last step, write the JS code to switch

  In fact, in the CSS switch, Toggleclass is the most convenient.
  But!!!
  This switching method cannot switch the JS event that you want to trigger.
  After all, we draw buttons to accomplish certain functions,
  So I'm using it this way, but maybe it's not 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; }});

  Here, a complete switch button is drawn to complete the
  Thank you for taking 3-5 minutes to read my unprofessional tutorial

PS: Yesterday to draw a button to control the light bulb switch (in fact, the switch background image), and then I four weeks to see a bull switch on the wall, since it is the control of the electric light, I want to play a simulation switch, endure the drowsiness of noon, but really reluctantly to draw out

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

Emulation switch. jpg
Simulation -2.jpg

PS: I quoted an initialization CSS file, may need to box-sizing:border-box;<StyleType="Text/css" > /* Outline of the switch */. button{Display:block;position:relative;Width160px;Height180px;Border-radius:5px;Background-color:#f1f1f1; }. button2{Display:block;position:relative;Width160px;Height180px;Border-radius:5px;Background-color:#f1f1f1; }/* Indicator */. indicate{Display:block;Position:absolute;Margin60px0070px;Width20px;Height4px;Border-radius:2px;Background-color:#A8C1C2;Z-index:1;Transition:all200ms; }. indicate_yes{Margin69px0070px;Background-color:#A3D7E7; }/* Small button inside the switch */. button: after{Display:block;Position:absolute;Top40px;Bottom40px;Left20px;Right20px;Line-height:52px;Border1px solid#FFF;Transition:all200ms; }. button2: after{Display:block;Position:absolute;Top49px;Bottom31px;Left20px;Right20px;Line-height:52px;Border1px solid#FFF;Transition:all200ms; }/* Small button in default state */. On: after {Content‘‘;Border-radius:5px;/* CSS3 's Color gradient highlights the button's bulge */BackgroundLinear-gradient (#fff, #f2f2f2 80%, #fff);/* Integrated application of CSS3, draw the edge of the button, give three-dimensional sense * *Box-shadow:01px00#fff,03px0.5px0#E7E9EA,05px0.5px0#DEDFDF,06px0.5px0#CCCCCD,07px0.5px0#C5C7C7,08px2px0#818283,09px2px0#A7A8A8; }/* Small button after closing */. Off: after {Content‘‘;Border-radius:5px;BackgroundLinear-gradient (#fff, #f2f2f2 80%, #fff);Box-shadow:0-1px00#fff,0-3px0.5px0#E7E9EA,0-5px0.5px0#DEDFDF,0-6px0.5px0#CCCCCD,0-7px0.5px0#C5C7C7,0-8px2px0#818283,0-9px2px0#A7A8A8; }</style>/* JS code */<script type="Text/javascript" >$ ('. Button '). Click (function (e) { var Toggle = this ; E.preventdefault (): $ (toggle). Toggleclass (' on'). Toggleclass (' off '). Toggleclass (  "Button2"); //indicator light on/off $ (this). Children (". Indicate"). Toggleclass ("Indicate_yes");}); //localstorage.clear (); </script>                 

You are welcome to join the Learning Exchange Group if you encounter any problems or want to acquire learning resources in the learning process.
343599877, we learn the front-end together!

Draw the button you want with CSS3/JS