CSS style (checkbox switch, CSS button)

CheckBox switch

As1

. Ioscheck{/*Blue Edition*/}. Ioscheck input{Display:None; }. Ioscheck I{Display:Inline-block;cursor:Pointer;Padding-right:25px;transition:All ease 0.2s;-webkit-transition:All ease 0.2s;Border-radius:25px;Box-shadow:inset 0 0 1px rgba (0, 0, 0, 0.5); }. Ioscheck I:before{Display:Block;content:"';width:25px;Height:25px;Border-radius:25px;background: White;Box-shadow:0 1px 2px rgba (0, 0, 0, 0.5); }. ioscheck:checked + i{Padding-right:0;Padding-left:25px;background:#00e970;Box-shadow:inset 0 0 1px rgba (0, 0, 0, 0.5), inset 0 0 40px #00e079;-webkit-box-shadow:inset 0 0 1px rgba (0, 0, 0, 0.5), inset 0 0 40px #00e079; }. iosCheck.blue:checked + i{background:#6cbff0;Box-shadow:inset 0 0 1px rgba (0, 0, 0, 0.5), inset 0 0 40px #0093ea;-webkit-box-shadow:inset 0 0 1px rgba (0, 0, 0, 0.5), inset 0 0 40px #0093ea; }/*General Styling*/

Html

<class= "Ioscheck">    <type= "checkbox"  name= "Register_give_switch"/>    <I  ></i></label>

CSS Buttons

Css

 /*Clean Gray * * * start *******************************************************************************/. Clean-gray{Background-color:#eeeeee;Background-image:-webkit-gradient (linear, left top, left bottom, Color-stop (0%, #eeeeee), Color-stop (100%, #cccccc));Background-image:-webkit-linear-gradient (Top, #eeeeee, #cccccc);Background-image:-moz-linear-gradient (Top, #eeeeee, #cccccc);Background-image:-ms-linear-gradient (Top, #eeeeee, #cccccc);Background-image:-o-linear-gradient (Top, #eeeeee, #cccccc);Background-image:linear-gradient (Top, #eeeeee, #cccccc);Border:1px solid #ccc;Border-bottom:1px solid #bbb;Border-radius:3px;Color:#333;Font:bold 11PX/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, Sans-serif;padding:1px 0;text-align:Center;Text-shadow:0 1px 0 #eee;width:150px;}. Clean-gray:hover{Background-color:#dddddd;Background-image:-webkit-gradient (linear, left top, left bottom, Color-stop (0%, #dddddd), Color-stop (100%, #bbbbbb));Background-image:-webkit-linear-gradient (Top, #dddddd, #bbbbbb);Background-image:-moz-linear-gradient (Top, #dddddd, #bbbbbb);Background-image:-ms-linear-gradient (Top, #dddddd, #bbbbbb);Background-image:-o-linear-gradient (Top, #dddddd, #bbbbbb);Background-image:linear-gradient (Top, #dddddd, #bbbbbb);Border:1px solid #bbb;Border-bottom:1px solid #999;cursor:Pointer;Text-shadow:0 1px 0 #ddd; }. Clean-gray:active{Border:1px solid #aaa;Border-bottom:1px solid #888;-webkit-box-shadow:inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;Box-shadow:inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; }. Detail-btn{margin:0 Auto;padding:0 10px;text-decoration:None;}. Detail-btn:hover{text-decoration:None;}/*Clean Gray * * * * End *******************************************************************************/

Html

< span   class = "Clean-gray detail-btn Sorry" > Cancel </span>

CSS style (checkbox switch, CSS button)