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

                                    
up down tr in table with js

up down tr in table with js

input file récupérer le nom du fichier

input file récupérer le nom du fichier

Vers le haut

Vers le haut

Timeline style04

Timeline style04

Texte Block Posts Style01

Texte Block Posts Style01

Scroll to div ID

Scroll to div ID

Pie Charts

Pie Charts

Partager sur les réseaux sociaux

Partager sur les réseaux sociaux

Form login b4 01

Form login b4 01

Form login 03

Form login 03

Changer le style du scroll bar in html

Changer le style du scroll bar in html

Card Profile Style01

Card Profile Style01