ismaail/toggle.html

## toggle.html
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
      <style>
      .switch {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 22px;
      }

      .switch input {display:none;}

      .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .2s;
        transition: .2s;
      }

      .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        -webkit-transition: .2s;
        transition: .2s;
      }

      input:checked + .slider {
        background-color: #2196F3;
      }

      input:focus + .slider {
        box-shadow: 0 0 1px #2196F3;
      }

      input:checked + .slider:before {
        -webkit-transform: translateX(29px);
        -ms-transform: translateX(29px);
        transform: translateX(29px);
      }

      /* Rounded sliders */
      .slider.round {
        border-radius: 34px;
      }

      .slider.round:before {
        border-radius: 50%;
      }
    </style>
  </head>
<body>
  <h2>Toggle Switch</h2>
  <label class="switch">
    <input type="checkbox">
    <span class="slider"></span>
  </label>
  <label class="switch">
    <input type="checkbox" checked>
    <span class="slider"></span>
  </label><br><br>
  <label class="switch">
    <input type="checkbox">
    <span class="slider round"></span>
  </label>
  <label class="switch">
    <input type="checkbox" checked>
    <span class="slider round"></span>
  </label>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	.switch {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 22px;
	}

	.switch input {display:none;}

	.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .2s;
	transition: .2s;
	}

	.slider:before {
	position: absolute;
	content: "";
	height: 18px;
	width: 18px;
	left: 2px;
	bottom: 2px;
	background-color: white;
	-webkit-transition: .2s;
	transition: .2s;
	}

	input:checked + .slider {
	background-color: #2196F3;
	}

	input:focus + .slider {
	box-shadow: 0 0 1px #2196F3;
	}

	input:checked + .slider:before {
	-webkit-transform: translateX(29px);
	-ms-transform: translateX(29px);
	transform: translateX(29px);
	}

	/* Rounded sliders */
	.slider.round {
	border-radius: 34px;
	}

	.slider.round:before {
	border-radius: 50%;
	}
	</style>
	</head>
	<body>
	<h2>Toggle Switch</h2>
	<label class="switch">
	<input type="checkbox">
	<span class="slider"></span>
	</label>
	<label class="switch">
	<input type="checkbox" checked>
	<span class="slider"></span>
	</label><br><br>
	<label class="switch">
	<input type="checkbox">
	<span class="slider round"></span>
	</label>
	<label class="switch">
	<input type="checkbox" checked>
	<span class="slider round"></span>
	</label>
	</body>
	</html>