LockSwitches – Kilit benzeri hazırlanmış onay kutusu

José Barcelon-Godfrey tarafından hazırlanmış bir Css3 switch buton örneği.  Basit  checkbox (onay kutusu) örneğine css3  kullanarak  farklı bir  görüntü kazandırmış. Normalde  tıklandığında  içinde  okey işareti beliren checkboxlar bu örnekte tıklandığında slayt  bir işlem gerçekleşiyor. Resimde  de gördüğünüz  gibi  bir tarafta  açık kilit bir taraftada kapalı kilit  bulunuyor. Checkbox alanını her tıkladığınızda ortada  bulunan sarı ve beyaz renklerle oluşturulmuş olan işaret bir  sağa bir  sola hareket ediyor.

Kullanım

• Head etiketleri arasına eklemeniz gereken bölüm.

Css : 

@import url(https://weloveiconfonts.com/api/?family=entypo);

/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

body {
 background:#ccc url(bg.png);
background-size: 180px;
}

::selection {background:transparent;}

.box {
  width:120px;
  height:50px;
  margin:50px auto 0px auto;
}
input[type="checkbox"]{display:none;}

label[for="lock"] {
  float:left;
  display:block;
  width:60px;
  height:20px;
  padding:3px;
  margin:0px 10px;
  border-radius:30px;
  background:rgba(0,0,0,.1);
  box-shadow:inset 0 2px 10px #666,
    0 2px 5px #eee;
}

label[for="lock_one"] {
  float:left;
  display:block;
  width:60px;
  height:20px;
  padding:3px;
  margin:0px 10px;
  border-radius:30px;
  background:rgba(0,0,0,.1);
  box-shadow:inset 0 2px 10px #666,
    0 2px 5px #eee;
}

.switch {
  display:block;
  width:10px;
  height:10px;
  padding:5px;
  background:#eee;
  box-shadow:inset 0 0 5px rgba(255, 165, 0,0.25),
    0 0 5px #888;
  border-radius:20px;
  -webkit-transition:.3s;
  -moz-transition:.3s;
  -o-transition:.3s;
  transition:.3s;

}

.switch:after {
  content:'';
  display:block;
  margin:0;
  width:10px;
  height:10px;
  background:#ffa500;
  border-radius:8px;
  box-shadow:inset 0 0 3px #555;
}

input[type="checkbox"]:checked ~ label[for="lock"] .switch {margin-left:40px;}

input[type="checkbox"]:checked ~ label[for="lock_one"] .switch {margin-left:40px;}

span[class*="entypo"] {
  color:rgba(0,0,0,0.15);
  float:left;
   font-size:22px;
  line-height:26px;
}
span[class="entypo-lock"] {}
span[class*="open"] {}
input[type="checkbox"]:not(:checked) ~ span[class="entypo-lock"] {
  color:rgba(255, 165, 0,0.65);
  text-shadow:0 0 3px #CFCFCF,
    0 -1px 2px rgba(255, 165, 0,.5),
    0 0 3px #CFCFCF;} 
input[type="checkbox"]:checked ~ span[class*="open"] {
  color:rgba(255, 165, 0,0.65);
  text-shadow:0 0 3px #CFCFCF,
    0 -1px 2px rgba(255, 165, 0,.5),
    0 0 3px #CFCFCF;}

•  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

<div class="box">
<input type="checkbox" id="lock" name="lock" checked/>
  <span class="entypo-lock" class="label"></span>
    <label for="lock">
      <div class="switch"></div>
    </label>
  <span class="entypo-lock-open"></span>
</div>

<div class="box">
 <input type="checkbox" id="lock_one" name="lock_one"/>
  <span class="entypo-lock" class="label"></span>
    <label for="lock_one">
      <div class="switch"></div>
    </label>
  <span class="entypo-lock-open"></span>
</div>