Amazing Creations of Input Type Checkbox

Sebenarnya banyak bahan buat postingan, tapi mencari yang unik dan aneh satu kendalanya. Koben mau berbagi trick tutorial seputar variabel input. Seperti yg kita ketahui sekarang, properti input dirangkai dengan property label dapat membuat karya yg luar binasa. Berikut beberapa link posted dengan kreasi menggunakan property input type checkbox

• Make accordion.
• Make popup.
• Make menu.
• Make spoiler.
• Make accordion.
• Make treevew menu.

Masih banyak c, cari ajah dech yach cendili :"> Berawal dari melihat animated check inputs cssdeck.com/labs/full/animated-check-inputs Satu tipe kreasi cek bok unik banget! Langsung saja bro coba di klik-klik...DEMOTerlihat sederhana namun kodenya lumayan bejibun :d

#check1[type="checkbox"] {
display: none;
}
#loadcheck1 {
display: block;
margin: 5px auto;
}
.loadcheck {
width: 165px;
height: 40px;
font-size: 35px;
}
.loadcheck span {
float: left;
cursor: pointer;
}
.load {
display: block;
width: 7px;
height: 7px;
margin: 20px 5px;
border-radius: 10px;
transition: .5s;
}
.load:nth-child(2) {
background: #e91639;
}
.load:nth-child(3) {
background: rgba(233, 22, 57, .7);
}
.load:nth-child(4) {
background: rgba(233, 22, 57, .5);
}
.load:nth-child(5) {
background: rgba(233, 22, 57, .3);
}
.load:nth-child(6) {
background: rgba(233, 22, 57, .1);
}
span[class*="cancel"] {
font-size: 40px;
color: #e91639;
transition: .5s;
transition-delay: .1s;
}
span[class*="check"] {
color: rgba(0, 0, 0, .1);
transition: .5s;
transition-delay: .1s;
}
#check1:checked + .loadcheck .entypo-check {
color: #13a03b;
}
#check1:checked + .loadcheck .entypo-cancel {
color: rgba(0, 0, 0, .1);
}
#check1:checked + .loadcheck .load:nth-child(2) {
background: rgba(19, 160, 59, .1);
}
#check1:checked + .loadcheck .load:nth-child(3) {
background: rgba(19, 160, 59, .3);
}
#check1:checked + .loadcheck .load:nth-child(4) {
background: rgba(19, 160, 59, .5);
}
#check1:checked + .loadcheck .load:nth-child(5) {
background: rgba(19, 160, 59, .7);
}
#check1:checked + .loadcheck .load:nth-child(6) {
background: #13a03b;
}

Markup HTML<input type="checkbox" id="check1" checked="" />
<label for="check1" class="loadcheck" id="loadcheck1">
<span class="entypo-cancel">&#10008;</span>
<span class="load"></span>
<span class="load"></span>
<span class="load"></span>
<span class="load"></span>
<span class="load"></span>
<span class="entypo-check">&#10004;</span>
</label>Edit kode sesuai dengan kebutuhan, terutama margin, height & width. Sekarang mari kita tambahkan sedikit variasi agar full stylish ;) Sekali lagi coba di klik²

DEMO

#check[type="checkbox"] {
display: none;
}
#loadcheck {
position: absolute;
left: 0;
right: 0;
margin: 25px auto;
cursor: pointer;
}
.loadcheck {
width: 165px;
height: 40px;
font-size: 35px;
}
.loadcheck span {
float: left;
}
.load {
display: block;
width: 7px;
height: 7px;
margin: 20px 5px;
border-radius: 10px;
transition: .5s;
cursor: pointer;
}
.load:nth-child(2) {
background: #db1536;
}
.load:nth-child(3) {
background: rgba(219, 21, 54, .7);
}
.load:nth-child(4) {
background: rgba(219, 21, 54, .5);
}
.load:nth-child(5) {
background: rgba(219, 21, 54, .3);
}
.load:nth-child(6) {
background: rgba(219, 21, 54, .1);
}
span[class*="cancel"] {
font-size: 40px;
color: #db1536;
transition: .5s;
transition-delay: .1s;
}
span[class*="check"] {
color: rgba(0, 0, 0, .1);
transition: .5s;
transition-delay: .1s;
}
#check:checked + .loadcheck .entypo-check {
color: #58d37b;
}
#check:checked + .loadcheck .entypo-cancel {
color: rgba(0, 0, 0, .1);
}
#check:checked + .loadcheck .load:nth-child(2) {
background: rgba(88, 211, 123, .1);
}
#check:checked + .loadcheck .load:nth-child(3) {
background: rgba(88, 211, 123, .3);
}
#check:checked + .loadcheck .load:nth-child(4) {
background: rgba(88, 211, 123, .5);
}
#check:checked + .loadcheck .load:nth-child(5) {
background: rgba(88, 211, 123, .7);
}
#check:checked + .loadcheck .load:nth-child(6) {
background: #58d37b;
}
.buka {
text-align: center;
letter-spacing: 1px;
color: #fff;
opacity: 0;
-webkit-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
.buka a {
color: #00ccff;
text-decoration: none;
}
#check:checked ~ .buka {
opacity: 1;
letter-spacing: 2px;
}

Planning HTML<input type="checkbox" id="check" />
<label for="check" class="loadcheck" id="loadcheck">
<span class="entypo-cancel">&#10008;</span>
<span class="load"></span>
<span class="load"></span>
<span class="load"></span>
<span class="load"></span>
<span class="load"></span>
<span class="entypo-check">&#10004;</span>
</label>
<div class="buka">Follow me on <a href="http://twitter.com/bebenkoben">twitter</a></div>Lakukan pengeditan sesuai dengan keperluan masing² Semoga bermanfaat dan menjadi blogger professional :)
Bonus:
www.bchanx.com/logos-in-pure-css-demo
ghinda.net/css-toggle-switch/bootstrap.html
alexpeattie.com/projects/windowed
Happy coding \m/