toggle switch style03

<!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="checkbox mt-3 mb-3 text-right">
              <label class="text-muted">
                <input type="checkbox" class="ios-switch green  bigswitch" checked />
                <div>
                  <div></div>
                </div>Se souvenir de moi
              </label>
            </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;
}

input[type="checkbox"] { 
  position: absolute;
  opacity: 0;
}

/* Normal Track */
input[type="checkbox"].ios-switch + div {
  vertical-align: middle;
  width: 40px;    height: 20px;
  border: 1px solid rgba(0,0,0,.4);
  border-radius: 999px;
  background-color: rgba(0, 0, 0, 0.1);
  -webkit-transition-duration: .4s;
  -webkit-transition-property: background-color, box-shadow;
  box-shadow: inset 0 0 0 0px rgba(0,0,0,0.4);
  margin: 15px 1.2em 15px 2.5em;
}

/* Big Track */
input[type="checkbox"].bigswitch.ios-switch + div {
  width: 50px;    height: 25px;
}

/* Green Track */
input[type="checkbox"].green.ios-switch:checked + div {
  background-color: #00e359;
  border: 1px solid rgba(0, 162, 63,1);
  box-shadow: inset 0 0 0 10px rgba(0,227,89,1);
}

/* Normal Knob */
input[type="checkbox"].ios-switch + div > div {
  float: left;
  width: 18px; height: 18px;
  border-radius: inherit;
  background: #ffffff;
  -webkit-transition-timing-function: cubic-bezier(.54,1.85,.5,1);
  -webkit-transition-duration: 0.4s;
  -webkit-transition-property: transform, background-color, box-shadow;
  -moz-transition-timing-function: cubic-bezier(.54,1.85,.5,1);
  -moz-transition-duration: 0.4s;
  -moz-transition-property: transform, background-color;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0px 0px 0 1px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  margin-top: 1px;
  margin-left: 1px;
}

/* Big Knob */
input[type="checkbox"].bigswitch.ios-switch + div > div {
  width: 23px; height: 23px;
  margin-top: 1px;
}

/* Checked Big Knob (Blue Style) */
input[type="checkbox"].bigswitch.ios-switch:checked + div > div {
  -webkit-transform: translate3d(25px, 0, 0);
  -moz-transform: translate3d(16px, 0, 0);
}

/* Green Knob */
input[type="checkbox"].green.ios-switch:checked + div > div {
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 162, 63,1);
}

                                    
Asidebar Bootstrap4 style02

Asidebar Bootstrap4 style02

Bootstrap Cookie Alert pages

Bootstrap Cookie Alert pages

Calculer la some des colones avec jquery

Calculer la some des colones avec jquery

Carousel 8 bloc with B4

Carousel 8 bloc with B4

Créer un effet de défilement vers le bas de la souris animé

Créer un effet de défilement vers le bas de la souris animé

Drag and drop or upload input file

Drag and drop or upload input file

Form login 02

Form login 02

Input file style02

Input file style02

Input range slider HTML style01

Input range slider HTML style01

Input range slider HTML style03

Input range slider HTML style03

Nav Menu style01

Nav Menu style01

login page green one

login page green one