Live Code Editor Version 2.0

Hướng dẫn tạo Toggle Switch với CSS - Demo RUN

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
          .container {
            width: 500px;
            margin: auto;
            text-align: center;
          }
          .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
            margin: 20px;
          }

.switch input {display:none;}

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

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

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

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

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

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

.slider.round:before {
            border-radius: 50%;
          }
        </style>
    </head>
    <body> 
<div class="container">
  <h2>Freetuts.net hướng dẫn tạo Toggle Switch</h2>
  
  <label class="switch">
    <input type="checkbox">
    <span class="slider"></span>
  </label>