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);
}

                                    
texte animate effects style 01

texte animate effects style 01

Scroll to div ID

Scroll to div ID

Radio Input Image Checkbox 01

Radio Input Image Checkbox 01

Input file style01

Input file style01

Image hover Flip Flap Style

Image hover Flip Flap Style

Image hover 07

Image hover 07

Creation dune icone de prechargement avec css

Creation dune icone de prechargement avec css

Chercher un mot sur la liste

Chercher un mot sur la liste

Changer le style du scroll bar in html

Changer le style du scroll bar in html

Background div gradient

Background div gradient

Ajouter supprimer une tr dans une table

Ajouter supprimer une tr dans une table

Ajouter multiple input dynamique

Ajouter multiple input dynamique