CSS Toggle Switch

dabblet.css

/*
   CSS Toggle Switch
*/

body{
  background: url('http://subtlepatterns.com/patterns/darkdenim3.png'), #333333;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: white;
}

h1 {
  text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 2px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 50px;
  text-align: center; }

h3 {
  text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 2px;
  width: 100%;
  text-align: center;
  color: rgba(255, 255, 255, 0.35);
  font-size: 16px;
  font-weight: normal; }

.slider-toggle {
  display: none;
  visibility: none; }

.slider-button,
.slider-content,
.slider {
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out; }

.slider-viewport {
  /* Uncomment the border-radius and border declaration to see the webkit bug in Chrome or Safari */
  /* border-radius: 50px;  border: 5px solid green; */
  -moz-border-radius: 50px;
  display: block;
  height: 100px;
  overflow: hidden;
  width: 300px;
  position: relative;
  margin: 30px auto 0;
  cursor: pointer; }

.slider {
  height: 100%;
  position: relative;
  width: 200%; }

.slider-button {
  -moz-border-radius: 50px;
  background-color: #f2f2f2;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFF2F2F2', endColorstr='#FFDDDDDD');
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IiIgcj0iODYiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmMmYyZjIiLz48c3RvcCBvZmZzZXQ9IjMyJSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIvPjxzdG9wIG9mZnNldD0iNjElIiBzdG9wLWNvbG9yPSIjZTJlMmUyIi8+PHN0b3Agb2Zmc2V0PSI4NiUiIHN0b3AtY29sb3I9IiNkZGRkZGQiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(radial, 50%, 0, 50%, 86, color-stop(0%, #f2f2f2), color-stop(32%, #eeeeee), color-stop(61%, #e2e2e2), color-stop(86%, #dddddd));
  background-image: -webkit-radial-gradient(center, ellipse cover, #f2f2f2 0%, #eeeeee 32%, #e2e2e2 61%, #dddddd 86%);
  background-image: -moz-radial-gradient(center, ellipse cover, #f2f2f2 0%, #eeeeee 32%, #e2e2e2 61%, #dddddd 86%);
  background-image: -o-radial-gradient(center, ellipse cover, #f2f2f2 0%, #eeeeee 32%, #e2e2e2 61%, #dddddd 86%);
  background-image: -ms-radial-gradient(center, ellipse cover, #f2f2f2 0%, #eeeeee 32%, #e2e2e2 61%, #dddddd 86%);
  background-image: radial-gradient(center, ellipse cover, #f2f2f2 0%, #eeeeee 32%, #e2e2e2 61%, #dddddd 86%);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: white 0 10px 8px inset, rgba(0, 0, 0, 0.4) 0 -5px 8px inset, rgba(0, 0, 0, 0.2) 0 0 5px;
  -moz-box-shadow: white 0 10px 8px inset, rgba(0, 0, 0, 0.4) 0 -5px 8px inset, rgba(0, 0, 0, 0.2) 0 0 5px;
  box-shadow: white 0 10px 8px inset, rgba(0, 0, 0, 0.4) 0 -5px 8px inset, rgba(0, 0, 0, 0.2) 0 0 5px;
  position: absolute;
  display: block;
  top: 0;
  height: 100px;
  width: 100px;
  cursor: pointer; }

.slider-content {
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 0 5px inset;
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 0 5px inset;
  box-shadow: rgba(0, 0, 0, 0.2) 0 0 5px inset;
  background: rgba(157, 38, 29, 0.5);
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 100%;
  width: 250px;
  font-size: 50px;
  font-weight: bold;
  text-transform: uppercase;
  top: 10px; }
  .slider-content span {
    text-shadow: rgba(0, 0, 0, 0.1) 1px 1px 2px;
    height: 100%;
    line-height: 100px;
    margin: 0 20px;
    float: left; }

.left {
  background-color: #59bdff;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF59BDFF', endColorstr='#FF44B7FF');
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU5YmRmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ0YjdmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #59bdff), color-stop(100%, #44b7ff));
  background-image: -webkit-linear-gradient(top, #59bdff 0%, #44b7ff 100%);
  background-image: -moz-linear-gradient(top, #59bdff 0%, #44b7ff 100%);
  background-image: -o-linear-gradient(top, #59bdff 0%, #44b7ff 100%);
  background-image: -ms-linear-gradient(top, #59bdff 0%, #44b7ff 100%);
  background-image: linear-gradient(top, #59bdff 0%, #44b7ff 100%); }

.right {
  background-color: #ff4f51;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFF4F51', endColorstr='#FFFF3A3A');
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmNGY1MSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmM2EzYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff4f51), color-stop(100%, #ff3a3a));
  background-image: -webkit-linear-gradient(top, #ff4f51 0%, #ff3a3a 100%);
  background-image: -moz-linear-gradient(top, #ff4f51 0%, #ff3a3a 100%);
  background-image: -o-linear-gradient(top, #ff4f51 0%, #ff3a3a 100%);
  background-image: -ms-linear-gradient(top, #ff4f51 0%, #ff3a3a 100%);
  background-image: linear-gradient(top, #ff4f51 0%, #ff3a3a 100%); }
  .right span {
    float: right; }

.slider-toggle + .slider-viewport > .slider {
  left: 0; }

.slider-toggle + .slider-viewport .slider-button {
  left: 200px; }

.slider-toggle + .slider-viewport .slider-content {
  width: 250px; }

.slider-toggle + .slider-viewport .left {
  margin-left: 0; }

.slider-toggle:checked + .slider-viewport > .slider {
  left: -100%; }

.slider-toggle:checked + .slider-viewport .slider-button {
  left: 300px; }

.slider-toggle:checked + .slider-viewport .left {
  margin-left: 100px; }

.look .slider-toggle {
  display: block;
  margin: 30px auto 0; }
.look .slider-viewport {
  margin-top: 10px;
  border: 4px solid orange;
  overflow: visible; }
.look .slider-content {
  opacity: .6; }


/* Checkout my related blog post: http://andymcfee.com/2012/05/01/css3-toggle-switch-a-ui-alternative-to-checkboxes/ */

dabblet.html

<!-- content to be placed inside <body>…</body> -->
        <h1>Pure CSS3 Toggle Switch</h1>
        
        <input type="checkbox" id="1" class="slider-toggle" />
        <label class="slider-viewport" for="1">
          <div class="slider">
            <div class="slider-button">&nbsp;</div>
            <div class="slider-content left"><span>On</span></div>
            <div class="slider-content right"><span>Off</span></div>
          </div>
        </label>
        <h3>Or: a pure CSS alternative to checkboxes</h3>
        
        <div class="look">
          <input type="checkbox" id="2" class="slider-toggle" />
          <label class="slider-viewport" for="2">
            <div class="slider">
              <div class="slider-button">&nbsp;</div>
              <div class="slider-content left"><span>On</span></div>
              <div class="slider-content right"><span>OFF</span></div>
            </div>
          </label>
        </div>
        <h3>A look behind the curtain...</h3>

settings.json

{"view":"split","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}