How to use CSS3+JS to draw sample code for various buttons to share

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 */.button:after{display:block on top   ;   Position:absolute;    Relative button contour to determine positioning   top:2px;   bottom:2px;        That is, set top, and set bottom to automatically stretch the elements to the maximum   left:2px;           In fact, the width of the button is the height of the container-(top+bottom)   width:36px;           The width of the button   line-height:36px;    The height of the button text, if you do not need text, you can remove   text-align:center;   Text-transform:uppercase;   font-size:16px;   Background-color: #fff;      The background color here is the button's background color   border:2px solid;   Transition:all 500ms;        Animation duration of the button}

  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

-then draw the state you want to toggle

. 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");      Here you can fill in the event zn=0 to be triggered      ;  } else{      $ (this). Removeclass ("Off"). AddClass ("on");       This can be filled with the event to be triggered      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

  The drawing process is not complicated, I will not elaborate, post and code, interested can see for themselves

Emulation switch. jpg

Simulation -2.jpg

PS: I referenced an initialized CSS file and may need to Box-sizing:border-box;<style type= "TEXT/CSS" >/* Switch outline */. 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 200ms;        }. indicate_yes{margin:69px 0 0 70px;    Background-color: #A3D7E7;        }/* Small button inside the switch */. 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;      }/* Small button in default state */. On:after {content: ';      border-radius:5px;      /* CSS3 's Color gradient highlights the button's bulge */background:linear-gradient (#fff, #f2f2f2 80%, #fff); /* CSS3 audio Integrated application, draw the edge of the button, give three-dimensional stereoscopic */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;      }/* 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 #CC CCCD, 0-7px 0.5px 0 #C5C7C7, 0-8px 2px0 #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"); Indicator light on/off $ (this). Children (". Indicate"). Toggleclass ("Indicate_yes");}); /localstorage.clear ();</script>