iPhone-style Toggle Switch / style.css

body {
  padding: 0px;
  margin: 0px;
     font-family: Helvetica;
 }

.switch {
     margin-left: 40px;
     width: 92px;
     height: 26px;
     border: solid 1px #adadad;
     -webkit-border-radius: 3px;
     -moz-border-radius: 4px;
     margin-top: 40px;
     overflow: hidden;
 }

.switch div {
     height: 25px;
     width: 148px;
     font-size: 16px;
  font-weight: bold;
     background: #777;
 }
 
 .switch .on {
     float:left;
     padding-top: 4px;
     padding-right: 2px;
     height: 25px;
     width: 52px;
     color: white;
     text-align: center;
     text-shadow: 0px -1px 1px rgba(0,0,0,0.3);
     background: #4d8fef;
     background: -webkit-gradient(linear, left top, left bottom, 
             color-stop(0.0, #295ab2), color-stop(0.45, #4085ec), color-stop(0.45, #4d8fef), color-stop(1.0, #538ad8));
 }
 
 .switch .yes {
     background: #ff8c0e;
     background: -webkit-gradient(linear, left top, left bottom, 
             color-stop(0.0, #d26608), color-stop(0.45, #ff8c0e), color-stop(0.45, #ff9921), color-stop(1.0, #febc56));
 }

.switch .btn {
     z-index: 2;
     float:left;
     height: 24px;
     position: relative;
     width: 38px;
     border-left: solid 1px #979797;
     border-right: solid 1px #979797;
     border-top: solid 1px #f0f0f0;
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     background: #e7e7e7;
     background: -webkit-gradient(linear, left top, left bottom, 
             color-stop(0.0, #cdcdcd), color-stop(1.0, #fbfbfb));
     -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
 }
 
 .switch .off {
     float:left;
     padding-top: 4px;
  height: 24px;
     position: relative;
     width: 52px;
     background: white;
     color: #7f7f7f;
     text-align: center;
     background: -webkit-gradient(linear, left top, left bottom, 
             color-stop(0.0, #b5b5b5), color-stop(0.45, #efefef), color-stop(0.45, #fff), color-stop(1.0, #fff));
 }