CSS3 Implementing a CheckBox Change button
HTML as follows
<! DOCTYPE html>
CSS as follows
. search_checkbox{margin:0;padding:0;margin-left:15px;display:inline-block;height:30px;padding-top:12px;}. Search_checkbox Input[type=checkbox]{height:0px;width:0px;visibility:hidden;}. Search_checkbox Label{cursor:pointer;height:20px;border-radius:10px;display:inline-block;background-color:gray; Width:40px;text-indent: -99999px;position:relative;}. Search_checkbox Label::before {content: ';d isplay:inline-block;background-color:white;height:15px;width:15px; position:absolute;top:2.5px;left:2.5px;border-radius:7px;transition:0.3s;}. Search_checkbox input:checked + Label { background: #bada55;}. Search_checkbox input:checked + label:before { Left:calc (100%-2.5px); Transform:translatex (-100%);}. Search_checkbox label:active:before{width:20px;}
Please reply if you have any questions.
CSS3 Implementing a CheckBox Change button