Pure CSS3 Metal Checkbox

HTML

<span class="checkbox">
    <input type="checkbox">
    <label data-on="ON" data-off="OFF"></label>
</span>

CSS

.checkbox {
  display:inline-block;
  position:relative;
  text-align:left;
  width:60px;
  height:30px;
  background-color:#222;
  overflow:hidden;
  -webkit-box-shadow:inset 0 1px 2px black,0 1px 0 rgba(255,255,255,0.1);
  -moz-box-shadow:inset 0 1px 2px black,0 1px 0 rgba(255,255,255,0.1);
  box-shadow:inset 0 1px 2px black,0 1px 0 rgba(255,255,255,0.1);
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  border-radius:6px;
}

.checkbox input {
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100%;
  height:100%;
  margin:0 0;
  cursor:pointer;
  opacity:0;
  filter:alpha(opacity=0);
  z-index:2;
}

.checkbox label {
  background-color:#3c3c3c;
  background-image:-webkit-linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
  background-image:-moz-linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
  background-image:-ms-linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
  background-image:-o-linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
  background-image:linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
  -webkit-box-shadow:0 0 0 1px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.7);
  -moz-box-shadow:0 0 0 1px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.7);
  box-shadow:0 0 0 1px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.7);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  display:inline-block;
  width:40px;
  text-align:center;
  font:bold 11px/28px Arial,Sans-Serif;
  color:#999;
  text-shadow:0 -1px 0 rgba(0,0,0,0.7);
  -webkit-transition:margin-left 0.2s ease-in-out;
  -moz-transition:margin-left 0.2s ease-in-out;
  -ms-transition:margin-left 0.2s ease-in-out;
  -o-transition:margin-left 0.2s ease-in-out;
  transition:margin-left 0.2s ease-in-out;
  margin:1px;
}

.checkbox label:before {
  content:attr(data-off);
}

.checkbox input:checked + label {
  margin-left:19px;
  background-color:#034B78;
  color:white;
}

.checkbox input:checked + label:before {
  content:attr(data-on);
}

DEMO

Check out this Pen!

About the Author

Written by Admin

Previl_TM is a modern, template is very suitable for a template of your blog,and features a very cool and nice so from me, Predator Evil TM