Mecha versi 2.6.3 sudah dirilis!

Pure CSS3 Toggle Checkbox

Tabel Konten
  1. HTML 
  2. CSS 
  3. Demo 
Pure CSS3 Toggle Button

Terinspirasi dari karya UmbrUI oleh Simurai. Yang ini adalah versi cross browser:

HTML 

<span class="toggle">
    <input type="checkbox">
    <label data-off="&#10006;" data-on="&#10004;"></label>
</span>

<span class="toggle">
    <input type="checkbox">
    <label data-off="&#9724;" data-on="&#9654;"></label>
</span>

<span class="toggle">
    <input type="checkbox">
    <label data-off="Stop" data-on="Play"></label>
</span>

CSS 

.toggle {
  position:relative;
  display:inline-block;
  width:40px;
  height:60px;
  background-color:#bbb;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
  text-align:center;
}

.toggle input {
  width:100%;
  height:100%;
  margin:0 0;
  padding:0 0;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:2;
  cursor:pointer;
  opacity:0;
}

.toggle label {
  display:block;
  position:absolute;
  top:1px;
  right:1px;
  bottom:1px;
  left:1px;
  background-image:-webkit-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
  background-image:-moz-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
  background-image:-ms-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
  background-image:-o-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
  background-image:linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
  -webkit-box-shadow:0 2px 3px rgba(0,0,0,0.4),
    inset 0 -1px 1px #888,
    inset 0 -5px 1px #bbb,
    inset 0 -6px 0 white;
  -moz-box-shadow:0 2px 3px rgba(0,0,0,0.4),
    inset 0 -1px 1px #888,
    inset 0 -5px 1px #bbb,
    inset 0 -6px 0 white;
  box-shadow:0 2px 3px rgba(0,0,0,0.4),
    inset 0 -1px 1px #888,
    inset 0 -5px 1px #bbb,
    inset 0 -6px 0 white;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  font:normal 11px Arial,Sans-Serif;
  color:#666;
  text-shadow:0 1px 0 white;
  cursor:text;
}

.toggle label:before {
  content:attr(data-off);
  position:absolute;
  top:6px;
  right:0;
  left:0;
  z-index:4;
}

.toggle label:after {
  content:attr(data-on);
  position:absolute;
  right:0;
  bottom:11px;
  left:0;
  color:#666;
  text-shadow:0 -1px 0 #eee;
}

.toggle input:checked + label {
  background-image:-webkit-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
  background-image:-moz-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
  background-image:-ms-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
  background-image:-o-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
  background-image:linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
  -webkit-box-shadow:0 0 1px rgba(0,0,0,0.4),
    inset 0 1px 7px -1px #ccc,
    inset 0 5px 1px #fafafa,
    inset 0 6px 0 white;
  -moz-box-shadow:0 0 1px rgba(0,0,0,0.4),
    inset 0 1px 7px -1px #ccc,
    inset 0 5px 1px #fafafa,
    inset 0 6px 0 white;
  box-shadow:0 0 1px rgba(0,0,0,0.4),
    inset 0 1px 7px -1px #ccc,
    inset 0 5px 1px #fafafa,
    inset 0 6px 0 white;
}

.toggle input:checked:hover + label {
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4),
    inset 0 1px 7px -1px #ccc,
    inset 0 5px 1px #fafafa,
    inset 0 6px 0 white;
  -moz-box-shadow:0 1px 3px rgba(0,0,0,0.4),
    inset 0 1px 7px -1px #ccc,
    inset 0 5px 1px #fafafa,
    inset 0 6px 0 white;
  box-shadow:0 1px 3px rgba(0,0,0,0.4),
    inset 0 1px 7px -1px #ccc,
    inset 0 5px 1px #fafafa,
    inset 0 6px 0 white;
}

.toggle input:checked + label:before {
  z-index:1;
  top:11px;
}

.toggle input:checked + label:after {
  bottom:9px;
  color:#aaa;
  text-shadow:none;
  z-index:4;
}

Demo 

5 Komentar

Putra

mas, boleh tanya tp beda sama tema postingannya? kalau boleh, saya tanya slider yang saya pakai sekarang (http://underground404.blogspot.com/) kok kalau imagenya besar kalau dihover, title nya kok gak muncul yah? trus tak pasang css img nya (width, height saya kasih 100%) malah nyusut T_T

Taufik Nurrohman

Jadi kok:

#slider li img {
display:block;
width:100%;
height:320px;
max-width:none;
}

Salim

waw .. seperti saklar lampu ... amazing ! :o

Kang Rian

ini yang saya suka dari css3 , banyak yang gak kepikiran :D \o/

Unknown

saya belum kepikiran sampai kesitu, keren nih, tapi fungsinya buat apa ya ? :p
http://yoga-tc.blogspot.com/

Komentar telah ditutup.