mkxml/gist:6779218

## gistfile1.html
<!DOCTYPE html>
<html>
<!--
  Switch inspired by iOS7.
  Works well in Chrome, Opera and FF.
  Safari works but it is a little glitchy.
-->
<head>
<meta charset="UTF-8">
<style>
body {
  font-size:24px;
}

.switch {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing:border-box;
  width:2.3em;
  height:1.3em;
}

.container {
  position:absolute;
  width:inherit;
  height:inherit;
}

.switch-container {
  position:relative;
  width:100%;
  height:100%;
  border:1px solid #CCC;
  background:#EEE;
  border-radius: 999px;
  transition: all 0.1s linear;
  -webkit-transition: all 0.1s linear;
}

.switch-container::before {
  content:'';
  position:absolute;
  top:0.02em;
  left:0;
  width:1.22em;
  height:1.22em;
  border: 1px solid #CCC;
  border-radius:100%;
  background:#FFF;
  box-shadow: -0.01em 0.01em 0.03em #333;
  transition: all 0.1s linear;
  -webkit-transition: all 0.1s linear;
}

.switch-check {
  position:absolute;
  opacity:0;
  z-index:1;
  width:100%;
  height:100%;
}

.switch-check:checked + .switch-container {
  background:#00BB3F;
  border: 1px solid #00BB3F;
}

.switch-check:checked + .switch-container::before {
  left:1em;
}

.switch-check:active + .switch-container::before {
  background: #F6F6F6;
}
</style>
</head>
<body>
  <div class="switch">
    <div class="container">
      <input class="switch-check" type="checkbox" />
      <div class="switch-container"></div>
    </div>
  </div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<!--
	Switch inspired by iOS7.
	Works well in Chrome, Opera and FF.
	Safari works but it is a little glitchy.
	-->
	<head>
	<meta charset="UTF-8">
	<style>
	body {
	font-size:24px;
	}

	.switch {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing:border-box;
	width:2.3em;
	height:1.3em;
	}

	.container {
	position:absolute;
	width:inherit;
	height:inherit;
	}

	.switch-container {
	position:relative;
	width:100%;
	height:100%;
	border:1px solid #CCC;
	background:#EEE;
	border-radius: 999px;
	transition: all 0.1s linear;
	-webkit-transition: all 0.1s linear;
	}

	.switch-container::before {
	content:'';
	position:absolute;
	top:0.02em;
	left:0;
	width:1.22em;
	height:1.22em;
	border: 1px solid #CCC;
	border-radius:100%;
	background:#FFF;
	box-shadow: -0.01em 0.01em 0.03em #333;
	transition: all 0.1s linear;
	-webkit-transition: all 0.1s linear;
	}

	.switch-check {
	position:absolute;
	opacity:0;
	z-index:1;
	width:100%;
	height:100%;
	}

	.switch-check:checked + .switch-container {
	background:#00BB3F;
	border: 1px solid #00BB3F;
	}

	.switch-check:checked + .switch-container::before {
	left:1em;
	}

	.switch-check:active + .switch-container::before {
	background: #F6F6F6;
	}
	</style>
	</head>
	<body>
	<div class="switch">
	<div class="container">
	<input class="switch-check" type="checkbox" />
	<div class="switch-container"></div>
	</div>
	</div>
	</body>
	</html>