Use CSS3/JS to draw the desired button and css3js to draw the button

Use CSS3/JS to draw the desired button and css3js to draw the button
I think the button is drawn in the following three steps:

• Step 1: Draw the button outline
  • Select the appropriate html Tag and set the CSS of the Outline

/* Html code */<a href = "#" class = "button off"> </a> body {background-color: # E6C9B6 ;} /* CSS style * // * button outline */. 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

• Step 2: default status of the draw button
  • This step is very important because we will not add other labels to the html file, so we need to use the: after pseudo class to perform CSS rendering on the button.

    /* Continue writing on it */. button: after {display: block; position: absolute; // locate the top: 2px; bottom: 2px; // you can set top, set bottom to automatically stretch the element to the maximum left: 2px; // In fact, the width of the button is the height of the container-(top + bottom) width: 36px; // line-height: 36px; // the line-height of the button text. If no text is required, remove text-align: center; text-transform: uppercase; font-size: 16px; background-color: # fff; // the background color here is the background color of the button. border: 2px solid; transition: all 500 ms; // The animation duration of the button}

    In fact, after this step is done, we will find that the effect on the browser has not changed, but it is still the same as before, but don't worry, we will obviously add something more.

  • Add a button to the profile

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

    The default status is off.

Imitation ios-2.jpg

-Then draw the status to switch.

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

Imitation ios-3.jpg

• The last step is to write JS Code for switching.

  In fact, toggleClass is the most convenient in CSS switching.
  But !!!
  This switching method cannot switch the JS event you want to trigger,
  After all, we draw buttons to complete some functions,
  So I am using this method, but it may not be the best.
  Var zn = 0; $ ('. button '). click (function (e) {if (zn = 1) {$ (this ). removeClass ("on "). addClass ("off"); // you can enter the event zn = 0;} else {$ (this ). removeClass ("off "). addClass ("on"); // you can enter the event zn = 1 ;}} to be triggered here ;}});
  By now, a complete switch button is drawn.
  Thank you for spending 3 ~ 5 minutes to read my non-professional tutorials

PS: drawing a button to control the light bulb switch yesterday (in fact, it is to switch the background picture). Then I saw a bull switch on the wall on thursmonday. Since it is used to control the light bulb, I just wanted to play the simulation switch, so I couldn't help but figure it out.

The rendering process is not complex, so I will not elaborate on it. Post it and the Code. If you are interested, you can take a look at it on your own.

Simulation switch .jpg
Simulation -2.jpg

PS: I have referenced an initialized CSS file. It may need box-sizing: border-box; <style type = "text/css">/* the contour of the switch */. 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;}/* indicator */. 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 200 ms ;}. indicate_yes {margin: 69px 0 0 70px; background-color: # A3D7E7;}/* Small switch */. button: after {display: block; position: absolute; top: 40px; bottom: 40px; left: 20px; right: 20px; line-height: 52px; border: 1px solid # FFF; transition: all 200 ms ;}. button2: after {display: block; position: absolute; top: 49px; bottom: 31px; left: 20px; right: 20px; line-height: 52px; border: 1px solid # FFF; transition: all 200 ms;}/* small button in default status */. on: after {content: ''; border-radius: 5px;/* color gradient of CSS3 highlight the protruding feeling of the button */background: linear-gradient (# fff, # f2f2f2 80%, # fff);/* Comprehensive audio and video application of CSS3, draw the edge of the button and give a stereoscopic effect */box-shadow: 0 1px 0 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;}/* small button after closing */. 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 ;} </style>/* JS code */<script type = "text/javascript"> $ ('. button '). click (function (e) {var toggle = this; e. preventDefault (); $ (toggle ). toggleClass ('on '). toggleClass ('off '). toggleClass ("button2"); // the light is on/off $ (this ). children (". indicate "). toggleClass ("indicate_yes") ;}); // localStorage. clear (); </script>

If you have any questions during the learning process or want to obtain learning resources, join the learning exchange group.
343599877. Let's learn the front-end together!