toggle switch style02

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Toggle Switch | par NGLESSON</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keyword" content="Toggle Switch">
    <meta name="author" content="Mezgani said">
    <meta name="copyright" content="NGLESSON">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="style.css"  rel="stylesheet" type="text/css">
</head>
<body >
      <div class="container mt-5">
        <div class="row">
          <div class="col-lg-6">

            <div class="toggle-group">
              <input type="checkbox" name="on-off-switch" id="on-off-switch" checked="" tabindex="1">
              <label for="on-off-switch">
                  <span class="aural">Show:</span> Show Accessible Toggle Switch
              </label>
              <div class="onoffswitch pull-right" aria-hidden="true">
                  <div class="onoffswitch-label">
                      <div class="onoffswitch-inner"></div>
                      <div class="onoffswitch-switch"></div>
                  </div>
              </div>
            </div>

          </div>
        </div>
      </div>
</body>
</html>
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');

* {
    margin:0px;
    padding:0px;
    box-sizing: border-box;
    font-family: 'Ubuntu', sans-serif;
}

body {
    position: fixed;
    width: 100%;
    height: 100%;
  }
  /* ON/OFF Switch */
  .onoffswitch {
    position: relative;
    width: 55px;
    display: inline-block;
    font-size: 80%;
  }
  .onoffswitch .onoffswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid hsl(0, 0%, 90%);
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    margin: 0;
  }
  .onoffswitch .onoffswitch-inner {
    width: 200%;
    margin-left: -100%;
    -webkit-transition: margin 0.15s ease-in-out;
    -o-transition: margin 0.15s ease-in-out;
    -moz-transition: margin 0.15s ease-in-out;
    transition: margin 0.15s ease-in-out;
  }
  .onoffswitch .onoffswitch-inner:before,
  .onoffswitch .onoffswitch-inner:after {
    float: left;
    width: 50%;
    height: 24px;
    padding: 0;
    line-height: 24px;
    font-size: 80%;
    color: hsl(0, 0%, 100%);
    font-weight: normal;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .onoffswitch .onoffswitch-inner:before {
    content: "ON";
    padding-left: 10px;
    background-color: hsl(203, 100%, 39.1569%);
    color: hsl(0, 0%, 100%);
  }
  .onoffswitch .onoffswitch-inner:after {
    content: "OFF";
    padding-right: 10px;
    background-color: hsl(0, 0%, 98%);
    color: hsl(0, 0%, 24%);
    text-align: right;
  }
  .onoffswitch .onoffswitch-switch {
    width: 22px;
    height: 22px;
    margin: 0;
    background: hsl(0, 0%, 100%);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    bottom: 0;
    right: 35px;
    -webkit-transition: right 0.15s ease-in-out;
    -o-transition: right 0.15s ease-in-out;
    -moz-transition: right 0.15s ease-in-out;
    transition: right 0.15s ease-in-out;
  }
  .toggle-group {
    position: relative;
    height: 27px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    top: 50%;
    left: 20px;
    margin-top: -13.5px;
  }
  .toggle-group input[type=checkbox] {
    position: absolute;
    left: 10px;
  }
  .toggle-group input[type=checkbox]:checked ~ .onoffswitch .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
  }
  .toggle-group input[type=checkbox]:checked ~ .onoffswitch .onoffswitch-label .onoffswitch-switch {
    right: 1px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  }
  .toggle-group input[type=checkbox]:focus ~ .onoffswitch {
    outline: thin dotted #333;
    outline: 0;
  }
  .toggle-group label {
    position: absolute;
    cursor: pointer;
    padding-left: 65px;
    display: inline-block;
    text-align: left;
    line-height: 24px;
    width: 100%;
    z-index: 1;
    height: 24px;
    font-weight: 200;
  }
  /* ==== Accessibility ===== */
  .aural {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
  }
  .aural:focus {
    clip: rect(0, 0, 0, 0);
    font-size: 1em;
    height: auto;
    outline: thin dotted;
    position: static !important;
    width: auto;
    overflow: visible;
  }

                                    
toggle switch style03

toggle switch style03

Triangle Background css 01

Triangle Background css 01

Timeline style07

Timeline style07

Timeline style05

Timeline style05

Timeline style04

Timeline style04

Texte Block Posts Style01

Texte Block Posts Style01

Input range slider HTML style01

Input range slider HTML style01

Image hover 02

Image hover 02

Geocoded Locations

Geocoded Locations

Form login 02

Form login 02

Double Scrollbar style in table 01

Double Scrollbar style in table 01

Créer des tds dynamiquement dans une table html

Créer des tds dynamiquement dans une table html