تالار میدوری

نسخه کامل: چک باکس های زیبا با CSS
شما در حال مشاهده نسخه تکمیل نشده می باشید. مشاهده نسخه کامل با قالب بندی مناسب.
چک باکس های زیبا با CSS
هشت مدل کليد یا سوییچ و یا چک باکس زیبا و جالب که توسط کدهای سی اس اس ایجاد میشوند را برای دوستان قرار می دهم . نمونه های زنده را در زیر ببینید و از کدهای داده شده استفاده کنید . تغییرات بعهده ی شماست .



کد HTML:
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="google" value="notranslate">
    <title>CodePen - Toggle Rebound</title>
    <link rel="stylesheet" href="wtFne_data/reset.css">
	   <style>
	 body {
  background : #d8d4d5;
}

#switch , #switch1 {
  position: absolute;
  left: -9999px;
}
.switch {
  display : block;
  width   : 170px;
  margin  : 50px auto;
  cursor  : pointer;
  border-radius : 25px;
  background    : #aae042;
  box-shadow    : inset 0 3px 7px 2px #444 , 0 -2px 5px 2px #888 , 0 -2px 3px 4px #eee , 0 2px 5px 3px #fefefe;
}
span {
  display : block;
  width   : 95px;
  height  : 44px;
  border-radius : inherit;
  background    : #D8D4D5;
  border-top    : 1px solid #eee;
  border-right  : 1px solid #ccc;
  box-shadow    :-1px 1px 5px 0 #000 , 0 5px 10px 0 #777;
  text-align    : center;
  position	 : relative;
  left		: 0;
}
.switch1 {
  background : #767477;
}
.switch1 span {
  left : 75px;
}
span i {
  display : inline-block;
  width   : 3px;
  height  : 16px;
  margin  : 12px auto;
  border-radius : 2px;
  margin-left   : 1px;
  background    : #dedadb;
  border-top    : 2px solid #eee;
  border-bottom : 2px solid #aaa;
  box-shadow    : -1px 0 1px 0 #bbb;
}
#switch:checked + .switch {
  background    : #767477;
}
#switch:checked + .switch span {
  left  : 75px;
}
#switch1:checked + .switch span {
  left  : 0;
}
#switch1:checked + .switch1 {
  background    : #aae042;
}
    </style>
    <script>
  window.console = window.console || function(t) {};
</script>
  </head>
  <body>
    <input name="switch" id="switch" type="checkbox">
<label for="switch" class ="switch">
  <span>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
  </span>
</label>
<input name="switch" id="switch1" type="checkbox">
<label for="switch1" class ="switch switch1">
  <span>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
  </span>
</label>
	<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
 </body></html>

==========================

کد HTML:
<!DOCTYPE html>
<html class =" -moz-"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="google" value="notranslate">
    <title>CodePen - FUN</title>
    <link rel="stylesheet" href="wtFne_data/reset.css">
	   <style>
	 body {
  background : #1b1b1b;
}
.container {
  width  : 400px;
  height : 150px;
  margin : 10px auto;
  padding-top: 100px;
}
#switch {
  position: absolute;
  left: -9999px;
}
.switch {
  display  : block;
  position : relative;
  width    : 190px;
  height   : 52px;
  margin   : auto;
  border-radius : 25px;
  box-shadow : 0 -2px 3px 0px rgba(0, 0, 0, 0.5) , 0 2px 3px 0px rgba(100, 100, 100, 0.5);
}
.switch > div {
  overflow : hidden;
  position : absolute;
  width    : inherit;
  height   : inherit;
  border-radius: inherit;
}
.switch .top , .switch .bottom {
  list-style-type : none;
  position : absolute;
  left	: 7px;
  width    : 200px;
  transition : all .5s linear;
}
.switch .top {
  top : -5px;
  transform : rotate(4deg);
}
.switch .bottom {
  bottom : -5px;
  transform : rotate(-4deg);
}
.switch li {
  width  : 15px;
  height : 10px;
  background : #fff;
  float  : left;
  margin-left: 5px;
  border-radius : 3px;
}
.top li {
  box-shadow : inset 0 0 10px 1px rgba(0, 0, 0, 0.8),0 0 10px 2px #000;
}
.bottom li {
  box-shadow : inset 0 0 10px 1px rgba(0, 0, 0, 0.3),0 0 10px 2px #000;    
}
label .button {
  display  : block;
  position : absolute;
  width    : 50px;
  height   : 50px;
  top	 : 1px;
  left	: 0;
  cursor   : pointer;
  border-radius : 50%;
  background : #1b1b1b;
  background-image : -webkit-linear-gradient(top, #32393a 10% , #1b1b1b 60% , ,#101718  100%);
  box-shadow : inset 0 1px 1px 0 #999 , inset 0 -1px 1px 0 #000,inset 0 0 15px 0 rgba(0,255, 0, 0.2);
  transition : left .5s linear , box-shadow .3s .2s linear;
}
label .button:after {
  display : block;
  content : '|||';
  text-align  : center;
  line-height : 44px;
  color	  : #000;
  text-shadow : 1px 0 0 rgba(200, 200, 200, 0.2);
  font-size   : 25px;
  font-weight : bold;
  letter-spacing : 3px;
}
.on , .off {
  display : block;
  position: absolute;
  width   : 20px;
  height  : 20px;
  border-radius : 50%;
  top	: -35px;
  transition : all .2s .3s linear;
}
.on {
  left : 20px;
  background : #0F0;
  box-shadow : inset 0 0 10px 2px #000,0 -1px 1px 1px #000,0 1px 1px 1px #333,0 0 30px 0 #0F0;
}

.off {
  right : 20px;
  background : #500;
  box-shadow : inset 0 0 10px 2px #000,0 -1px 1px 1px #000,0 1px 1px 1px #333;
}
.on:before , .off:before {
  position : absolute;
  top	 : -30px;
  font-size: 20px;
  font-family : corbel;
  transition : all .2s .3s linear;
}
.on:before {
  content : 'on';
  color    : #FFF;
}
.off:before {
  content : 'off';
  color    : rgba(250, 250, 250, 0.3);
}
#switch:checked + label .button {
  left : 140px;
  box-shadow : inset 0 1px 1px 0 #999 , inset 0 -1px 1px 0 #000,inset 0 0 15px 0 rgba(255, 0, 0, 0.2);
  transition : left .5s linear , box-shadow .3s .2s linear;
}
#switch:checked + label .top {
  transform : rotate(-4deg);
  transition : all .5s linear;
}
#switch:checked + label .bottom {
  transform : rotate(4deg);
  transition : all .5s linear;
}
#switch:checked + label .on {
  background : #050;
  box-shadow : inset 0 0 10px 2px #000,0 -1px 1px 1px #000,0 1px 1px 1px #333;
  transition : all .2s .3s linear;
}
#switch:checked + label .off {
  background : #F00;
  box-shadow : inset 0 0 10px 2px #000,0 -1px 1px 1px #000,0 1px 1px 1px #333,0 0 30px 0 #F00;
  transition : all .2s .3s linear;
}
#switch:checked + label .on:before {
  color : rgba(250, 250, 250, 0.3);
  transition : all .2s .3s linear;
}
#switch:checked + label .off:before {
  color : #FFF;
  transition : all .2s .3s linear;
}
    </style>
    <script>
  window.console = window.console || function(t) {};
</script>
	   <script src="wtFne_data/prefixfree.js"></script>
  </head>
  <body>
    <div class ="container">
  <input id="switch" type="checkbox">
  <label for="switch" class ="switch">
    <div>
	 <ul class ="top">
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	 </ul>
	 <ul class ="bottom">
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	 </ul>
	 <span class ="button"></span>
    </div>
    <span class ="on"></span>		  
    <span class ="off"></span>
  </label>
</div>
    <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
</body></html>

==========================

کد HTML:
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="google" value="notranslate">
    <title>CodePen - Pure CSS button switch</title>
    <link rel="stylesheet" href="wtFne_data/reset.css">
	   <style>
	 body {
  background: rgb(241,236,232);
  background: -moz-linear-gradient(top,  rgba(241,236,232,1) 0%, rgba(237,234,229,1) 23%, rgba(234,229,225,1) 35%, rgba(234,229,225,1) 47%, rgba(227,220,214,1) 100%);
  background: -webkit-linear-gradient(top,  rgba(241,236,232,1) 0%,rgba(237,234,229,1) 23%,rgba(234,229,225,1) 35%,rgba(234,229,225,1) 47%,rgba(227,220,214,1) 100%);
}
#switch {
  position: absolute;
  left: -9999px;
}
.switch {
  position	 : relative;
  display	  : block;
  width	    : 30px;
  padding	  : 15px;
  height	   : 19px;
  border-radius : 50%;
  margin	   : 100px auto; 
  border-bottom : 4px solid #b2afaa;
  box-shadow    : inset 0 2px 3px 0px #FFF , inset 0 -1px 2px 0px #999 , 0 3px 3px -1px #222;
  cursor	   : pointer;
  background: -moz-linear-gradient(top,  rgba(233,228,224,1) 0%, rgba(233,228,224,1) 67%, rgba(249,244,240,1) 75%, rgba(239,239,239,1) 100%);
  
  background: -webkit-linear-gradient(top,  rgba(233,228,224,1) 0%,rgba(233,228,224,1) 67%,rgba(249,244,240,1) 75%,rgba(239,239,239,1) 100%);
}
.switch:before {
  display  : block;
  content  : "";
  z-index  : -1;
  position : absolute;
  top	 : -6px;
  left	: -6px;
  width    : 68px;
  height   : 68px;
  border-radius : inherit;
  border   : 2px solid #eee;
  background: rgb(144,136,123);
  background: -moz-linear-gradient(top,  rgba(144,136,123,1) 0%, rgba(144,136,123,1) 21%, rgba(154,147,131,1) 29%, rgba(204,193,171,1) 50%, rgba(213,203,178,1) 55%, rgba(221,211,184,1) 61%, rgba(221,211,184,1) 100%);
  background: -webkit-linear-gradient(top,  rgba(144,136,123,1) 0%,rgba(144,136,123,1) 21%,rgba(154,147,131,1) 29%,rgba(204,193,171,1) 50%,rgba(213,203,178,1) 55%,rgba(221,211,184,1) 61%,rgba(221,211,184,1) 100%);
}
.switch:after {
  content : "ON";
  position : absolute;
  top	 : -40px;
  left	: 17px;
  color    : #daaa18;
  font-family : "Verdana";
  text-shadow : 0 -1px 0 #999 , 1px 1px 0 #FFF;
  font-size   : 14px;
}
.switch .bg {
  display : block;
  position: absolute;
  top	: 0;
  left    : 0;
  z-index : -1;
  width   : 60px;
  height  : 60px;
  border-radius : 50%;
  background : #daaa18;
}
i {
  float  : left;
  width  : 3px;
  height : 3px;
  border-radius : 50%;
  background  : #efefef;
  box-shadow  : 0 1px 1px 0 #999;
  margin	 : 2px 1px 2px 3px;
}
i:nth-child(14) , i:nth-child(15) , i:nth-child(16) , i:nth-child(17) {
  height : 1px;
}
#switch:checked + .switch {
  background    : #ede8e2;
  border	   : 1px solid #6f6658;
  height	   : 30px;
  box-shadow    : inset 0 2px 3px 0px #FFF , inset 0 -1px 2px 0px #999;
}
#switch:checked + .switch i {
  height : 3px;
}
#switch:checked + .switch:after {
  content : "OFF";
  color   : #aaa;
}
    </style>
    <script>
  window.console = window.console || function(t) {};
</script>
  </head>
  <body>
    <input name="switch" id="switch" type="checkbox">
<label for="switch" class ="switch">
  <span class ="bg"></span>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
</label>
    <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
</body></html>

==========================

کد HTML:
<!DOCTYPE html>
<html class =" -moz-"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="google" value="notranslate">
    <title>CodePen - Button</title>
	<link rel="stylesheet" href="wtFne_data/reset.css">
	   <style>
	 body {
  background-color: #1b1b1b;
}
.container {
  width  : 150px;
  height : 130px;
  padding-top : 20px;
  margin : 50px auto ;
}
#power {
  position: absolute;
  left: -9999px;
}
label {
  display : block;
  width   : 100px;
  height  : 100px;
  border-radius : 50%;
  position   : relative;
  margin	: auto;
  border	: 4px solid #636679;
  background : -webkit-radial-gradient(center , ellipse cover, #efefef 0% , #EEE 80% , #FFF 100%);
  background :    -moz-radial-gradient(center , ellipse cover, #efefef 0% , #EEE 80% , #FFF 100%);
  background :	    radial-gradient(center , ellipse cover, #fefefe 0% , #EEE 80% , #FFF 100%);
  box-shadow : inset 0 -5px 10px 0 #d0d5eb , inset 0 5px 10px 0 #FFF , 0 0 0 1px #333;
  cursor	: pointer;
  text-align  : center;
  font-size   : 40px;
  color	  : #0f0;
  line-height : 100px;
  text-shadow : -1px -1px 0px #FFF , 1px 1px 0px #FFF;
  transition : all .1s ease-in-out;
}
label:after , label:before {
  display : block;
  content : "";
  position: absolute;
}
label:before {
  width  : 150px;
  height : 150px;
  border-radius : 20px;
  background    : -webkit-linear-gradient(top,  #fefefe 0%, #eee 30%, #ddd 82%,#ddd 100%);
  background    :    -moz-linear-gradient(top,  #fefefe 0%, #eee 30%, #ddd 82%,#ddd 100%);
  background    :	    linear-gradient(top,  #fefefe 0%, #eee 30%, #ddd 82%,#ddd 100%);
  box-shadow    : 0 10px 30px 0 #000 ;
  top	: -25px;
  left    : -25px;
  z-index : -2;
}
label:after {
  width  : 130px;
  height : 130px;
  border-radius : 50%;
  background : #fff;
  top  : -15px;
  left : -15px;
  z-index : -1;
  box-shadow : 0 -2px 5px 0px #fefefe , 0 2px 5px 0 #ccc;
  background: rgb(210,215,237);
  background: -webkit-linear-gradient(top,  #ddd 0%, #ddd 30%, #eee 82%,#efefef 100%);
  background:    -moz-linear-gradient(top,  #ddd 0%, #ddd 30%, #eee 82%,#efefef 100%);
  background:	    linear-gradient(top,  #ddd 0%, #ddd 30%, #eee 82%,#efefef 100%);
}
.light {
  display    : block;
  width	 : 12px;
  height	: 12px;
  position   : absolute;
  top	   : -12px;
  right	 : -12px;
  background : -webkit-radial-gradient(center , ellipse cover, #fff 0% , #d6f804 80% , #bade32 100%);
  background :    -moz-radial-gradient(center , ellipse cover, #fff 0% , #d6f804 80% , #bade32 100%);
  background :	    radial-gradient(center , ellipse cover, #fff 0% , #d6f804 80% , #bade32 100%);
  box-shadow : inset 0 1px 1px 0 #333 ,inset 0 -1px 1px 0 #333 , 0 0 5px 1px #bade32;
  border-radius : 50%;
  transition : all .1s ease-in-out;
}
.icon-off {
  position : absolute;
  top	 : 0;
  left	: 0;
  right    : 0;
  bottom   : 0;
  margin   : auto;
  width    : 40px;
  height   : 40px;
  border-radius : 50%;
  background : #d6f804;
  box-shadow : inset 0 0 4px 0 #999;
  transition : all .1s ease-in-out;
}
.icon-off:after {
  display  : block;
  content  : '';
  position : absolute;
  top	 : 0; bottom : 0;
  left	: 0; right  : 0;
  margin   : auto;
  width    : 26px;
  height   : 26px;
  border-radius : 50%;
  background    : #eee;
  box-shadow : 0 0 3px 0 #999;
  z-index    : 2;
}
.icon-off:before {
  display  : block;
  content  : '';
  position : absolute;
  top	 : -5px;
  left	: 0; right  : 0;
  margin   : auto;
  width    : 8px;
  height   : 25px;
  background : #d6f804;
  box-shadow : inherit;
  border-radius : 10px;
  border-style  : solid;
  border-width  : 0 3px 0;
  border-color  : #EEE;
  z-index    : 3;
  transition : all .1s ease-in-out;
}
#power:checked + label {
  background : -webkit-radial-gradient(center , ellipse cover, #ddd 0% , #EEE 80% , #efefef 100%);
  background :	    radial-gradient(center , ellipse cover, #ddd 0% , #EEE 80% , #efefef 100%);
  background :	    radial-gradient(center , ellipse cover, #ddd 0% , #EEE 80% , #efefef 100%);
  box-shadow : inset 0 -5px 10px 0 #aaa , inset 0 5px 10px 0 #aaa , 0 0 0 1px #333;
  transition : all .1s linear;
  
}
#power:checked + label .light {
  background : -webkit-radial-gradient(center , ellipse cover, #fcc 0% , #f88 60% , #f00 100%);
  background :    -moz-radial-gradient(center , ellipse cover, #fcc 0% , #f88 60% , #f00 100%);
  background :	    radial-gradient(center , ellipse cover, #fcc 0% , #f88 60% , #f00 100%);
  box-shadow : inset 0 1px 1px 0 #555 ,inset 0 -1px 1px 0 #555 , 0 0 5px 0 #f55;
  transition : all .1s linear;
}
#power:checked + label .icon-off {
  background : transparent;
  box-shadow : inset 0 0 5px 0 #777;
  transition : all .1s linear;
} 
#power:checked + label .icon-off:after {
  background : inherit;
  box-shadow : 0 0 5px 0 #777;
} 
#power:checked + label .icon-off:before {
  background   : #ddd;
  border-color : #dfdfdf;
  box-shadow   : inherit;
  transition : all .1s linear;
} 
    </style>
    <script>
  window.console = window.console || function(t) {};
</script>
	   <script src="wtFne_data/prefixfree.js"></script>
  </head>
  <body>
    <div class ="container">
	   <input id="power" name="power" type="checkbox">
	   <label for="power" class ="power">
		  <span class ="icon-off"></span>
		  <span class ="light"></span>
	   </label>
</div>
    <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
</body></html>

==========================

کد HTML:
<!DOCTYPE html>
<html class =" -moz-"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="google" value="notranslate">
    <title>CodePen - Switching</title>
    <link rel="stylesheet" href="wtFne_data/reset.css">
	   <style>
	 body {
  background : #1b1b1b;	 
}
.toggle , .toggle1{
  cursor  : pointer;
  display : block;
  width   : 130px;
  height  : 130px;
  position: relative;
}
.toggle {
  float : left;
  margin: 30px 0 0 400px;
}
.toggle1 {
  float : right;
  margin: 30px 400px 0 0;
}
.a , .b{
  position : absolute;
  top   : 0;
  left  : 0;
  width : 130px;
  height: 130px;
  background  : #b1bb1b;
  text-align  : center;
  font-size   : 90px;
  line-height : 130px;
  font-family : georgia;
  font-weight : bold;
  color	  : #1b1b1b;
  border-radius : 15px;
  border : 2px dotted rgba(0,0,0,.5);
  text-shadow : 1px 1px 0 rgba(250, 250, 250, 0.5);
}
.a {
  z-index : 1;
}
.b {
  background : #b1bbfb;
  z-index : 2;
}
#switch , #switch1 {
  position: absolute;
  left: -9999px;
}
#switch:checked ~ .toggle .b {
  animation : move-r 1s both;
}
#switch:not(:checked) ~ .toggle .b{
  animation : move-l 1s both;
}
@keyframes move-r {
  40% {
    transform : rotate(500deg) scale(1.1);
    left : 130%;
  }
  
  100% {
    left    : 0;
    z-index : -1;
  }
  
}
@keyframes move-l {
  0% {
    -webkit-transform : rotate(0deg);
    left    : 0;
    z-index : -1;
  }
  50% {
    transform : rotate(900deg) scale(.6);
    left    : -130%;
    z-index : -1;
  }
  100% {
    left    : 0;
    z-index : 2;
  } 
}
/* toggle1 */
#switch1:checked ~ .toggle1 .b {
  animation : move 1s both;
}
#switch1:checked ~ .toggle1 .a {
  animation : face 1s both;
}
#switch1:not(:checked) ~ .toggle1 .a{
  animation : move 1s both;
}

#switch1:not(:checked) ~ .toggle1 .b{
  animation : face 1s both;
}
@keyframes move {
  0% {
    z-index : 3;
  }
  50% {
    transform : rotate(15deg) scale(.6);
    left    : 130%;
    z-index : 3;
  }
  100% {
    left    : 0;
    z-index : 0;
  }
}
@keyframes  face {
  to {
    z-index : 3;
  }
}
    </style>
    <script>
  window.console = window.console || function(t) {};
</script>
	   <script src="wtFne_data/prefixfree.js"></script>
  </head>

  <body>
    <input id="switch" type="checkbox">
<label class ="toggle" for="switch">
  <div class ="a">♣</div>
  <div class ="b">☺</div>
</label>

<input id="switch1" type="checkbox">
<label class ="toggle1" for="switch1">
  <div class ="a">☺</div>
  <div class ="b">♥</div>
</label>
<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
</body></html>

==========================

کد HTML:
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="google" value="notranslate">
    <title>CodePen - Pure CSS Toggles</title>
    <title>Pure Toggle Effects, by RGG</title>
	   <meta charset="UTF-8">
	   <meta name="viewport" content="width=device-width, initial-scale=1.0">
	   <style>
	 @charset "UTF-8";
@import url(weloveiconfonts.com.css);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700,300);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}
html {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}
q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}
a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}
body {
  background-color: #d0d0d0;
  text-align: center;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  color: #444444;
}
header {
  margin-bottom: 2em;
}
h1 {
  font-size: 2em;
  margin: 2em 0 1em;
}
strong {
  font-weight: 700;
}
legend {
  font-size: 1.5em;
  line-height: 1em;
  margin-bottom: 1.9em;
  padding-bottom: 1.5em;
  border-bottom: 1px solid #444444;
  width: 100%;
}
div {
  margin-bottom: 1em;
}
fieldset {
  border: 0;
  padding: 0 2em 2em;
}
.pure-toggle {
  cursor: pointer;
  font-size: 1.5em;
  width: 6em;
  height: 3em;
  display: inline-block;
  position: relative;
  background: white;
  text-align: left;
  line-height: 3em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-perspective: 300px;
  -webkit-perspective: 300px;
  perspective: 300px;
}
.pure-toggle:before {
  width: 3em;
  height: 3em;
  position: absolute;
  right: 0;
  top: 0;
  background-color: #f5f5f5;
  display: inline-block;
  text-align: center;
  font-family: 'FontAwesome', sans-serif;
  content: "···";
  color: #ffffff;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  -moz-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  /*@include box-shadow(0.1em 0 0.2em rgba(0,0,0,0.3));*/
}
.pure-toggle [class^='fontawesome-'] {
  padding: 1em;
  line-height: inherit;
  font-family: 'FontAwesome', sans-serif;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.pure-toggle.flip:before {
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
.pure-toggle.brick {
  background-color: white;
  border: 1px solid #d9d9d9;
  border-bottom-color: #e6e6e6;
  -moz-box-shadow: inset 0 0.1em 0.03em rgba(0, 0, 0, 0.2), inset 0 0.1em 0.3em rgba(0, 0, 0, 0.3), 0 0 2em rgba(255, 255, 255, 0.6);
  -webkit-box-shadow: inset 0 0.1em 0.03em rgba(0, 0, 0, 0.2), inset 0 0.1em 0.3em rgba(0, 0, 0, 0.3), 0 0 2em rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 0.1em 0.03em rgba(0, 0, 0, 0.2), inset 0 0.1em 0.3em rgba(0, 0, 0, 0.3), 0 0 2em rgba(255, 255, 255, 0.6);
}
.pure-toggle.brick:before {
  margin-right: -1px;
  margin-top: -0.14em;
  -moz-box-shadow: 0 0.12em 0.01em #3ba5bc, 0 0.12em 0.3em rgba(59, 165, 188, 0.6), 0 0.12em 2em rgba(0, 0, 0, 0.3), -0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0.12em 0.01em #3ba5bc, 0 0.12em 0.3em rgba(59, 165, 188, 0.6), 0 0.12em 2em rgba(0, 0, 0, 0.3), -0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2);
  box-shadow: 0 0.12em 0.01em #3ba5bc, 0 0.12em 0.3em rgba(59, 165, 188, 0.6), 0 0.12em 2em rgba(0, 0, 0, 0.3), -0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2);
  -moz-transition-duration: 0.66667s;
  -o-transition-duration: 0.66667s;
  -webkit-transition-duration: 0.66667s;
  transition-duration: 0.66667s;
  -moz-transition-timing-function: cubic-bezier(0.52, -0.41, 0.55, 1.46);
  -o-transition-timing-function: cubic-bezier(0.52, -0.41, 0.55, 1.46);
  -webkit-transition-timing-function: cubic-bezier(0.52, -0.41, 0.55, 1.46);
  transition-timing-function: cubic-bezier(0.52, -0.41, 0.55, 1.46);
}
.pure-toggle.brick.switch {
  background: transparent;
  -moz-box-shadow: inset 0 0 0.03em transparent, inset 0 0 0.3em transparent, 0 0 2em rgba(255, 255, 255, 0);
  -webkit-box-shadow: inset 0 0 0.03em transparent, inset 0 0 0.3em transparent, 0 0 2em rgba(255, 255, 255, 0);
  box-shadow: inset 0 0 0.03em transparent, inset 0 0 0.3em transparent, 0 0 2em rgba(255, 255, 255, 0);
  border: 0;
}
.pure-toggle.brick.switch:before {
  display: none;
}
.pure-toggle.brick.switch .ok {
  color: white;
  top: 0;
  left: 1px;
  line-height: 1em;
  padding: 1em 1.045em;
  position: relative;
  background: #5EB9CC;
  -moz-box-shadow: 0 0.12em 0.01em #3ba5bc, 0 0.12em 0.3em rgba(59, 165, 188, 0.6), 0 0.12em 2em rgba(0, 0, 0, 0.3), -0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0.12em 0.01em #3ba5bc, 0 0.12em 0.3em rgba(59, 165, 188, 0.6), 0 0.12em 2em rgba(0, 0, 0, 0.3), -0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2);
  box-shadow: 0 0.12em 0.01em #3ba5bc, 0 0.12em 0.3em rgba(59, 165, 188, 0.6), 0 0.12em 2em rgba(0, 0, 0, 0.3), -0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2);
  -moz-transition-duration: 0.33333s;
  -o-transition-duration: 0.33333s;
  -webkit-transition-duration: 0.33333s;
  transition-duration: 0.33333s;
}
.pure-toggle.brick.switch .ok.no {
  top: 0.14em;
  background: transparent;
  background: #cc0966;
  -moz-box-shadow: 0 0 0.01em #9b074e, 0 0 0.3em rgba(155, 7, 78, 0.6), 0 0.12em 2em transparent, -0.12em 0.15em 0.2em transparent;
  -webkit-box-shadow: 0 0 0.01em #9b074e, 0 0 0.3em rgba(155, 7, 78, 0.6), 0 0.12em 2em transparent, -0.12em 0.15em 0.2em transparent;
  box-shadow: 0 0 0.01em #9b074e, 0 0 0.3em rgba(155, 7, 78, 0.6), 0 0.12em 2em transparent, -0.12em 0.15em 0.2em transparent;
}
input[type='checkbox'] + .pure-toggle:before {
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  background-color: #5EB9CC;
}
input[type='checkbox'] + .pure-toggle [class^="fontawesome-"],
input[type='checkbox'] + .pure-toggle [class*="fontawesome-"] {
  color: #5EB9CC;
}
input[type='checkbox'] + .pure-toggle.wide:before {
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  -moz-animation: contract 1s ease-in-out forwards;
  -webkit-animation: contract 1s ease-in-out forwards;
  animation: contract 1s ease-in-out forwards;
}
input[type='checkbox'] + .pure-toggle.brick:before {
  border-bottom: 0.03em solid #71c1d2;
  text-shadow: 0 0.05em 0 #4bb1c6;
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
input[type='checkbox'] + .pure-toggle.brick.switch .ok {
  color: white;
}
input[type='checkbox'] + .pure-toggle.flip:before {
  -moz-animation: flip 0.5s ease-in-out forwards;
  -webkit-animation: flip 0.5s ease-in-out forwards;
  animation: flip 0.5s ease-in-out forwards;
}
input[type='checkbox'] + .pure-toggle.impossible:before {
  -moz-animation: impossible 0.5s ease-in-out forwards;
  -webkit-animation: impossible 0.5s ease-in-out forwards;
  animation: impossible 0.5s ease-in-out forwards;
}
input[type='checkbox']:checked + .pure-toggle:before {
  -moz-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  background-color: #cc0966;
}
input[type='checkbox']:checked + .pure-toggle [class^="fontawesome-"],
input[type='checkbox']:checked + .pure-toggle [class*="fontawesome-"] {
  color: #cc0966;
}
input[type='checkbox']:checked + .pure-toggle.wide:before {
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  -moz-animation: expand 1s ease-in-out forwards;
  -webkit-animation: expand 1s ease-in-out forwards;
  animation: expand 1s ease-in-out forwards;
}
input[type='checkbox']:checked + .pure-toggle.brick:before {
  margin-right: 3em;
  border-bottom: 0.03em solid #f5137f;
  text-shadow: 0 0.05em 0 #9b074e;
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  -moz-box-shadow: 0 0.12em 0.01em #9b074e, 0 0.12em 0.3em rgba(155, 7, 78, 0.6), 0 0.12em 2em rgba(0, 0, 0, 0.3), 0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0.12em 0.01em #9b074e, 0 0.12em 0.3em rgba(155, 7, 78, 0.6), 0 0.12em 2em rgba(0, 0, 0, 0.3), 0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2);
  box-shadow: 0 0.12em 0.01em #9b074e, 0 0.12em 0.3em rgba(155, 7, 78, 0.6), 0 0.12em 2em rgba(0, 0, 0, 0.3), 0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2);
}
input[type='checkbox']:checked + .pure-toggle.brick.switch:before {
  display: none;
}
input[type='checkbox']:checked + .pure-toggle.brick.switch .ok {
  top: 0.14em;
  -moz-box-shadow: 0 0 0.01em #3ba5bc, 0 0 0.3em rgba(59, 165, 188, 0.6), 0 0.12em 2em transparent, -0.12em 0.15em 0.2em transparent;
  -webkit-box-shadow: 0 0 0.01em #3ba5bc, 0 0 0.3em rgba(59, 165, 188, 0.6), 0 0.12em 2em transparent, -0.12em 0.15em 0.2em transparent;
  box-shadow: 0 0 0.01em #3ba5bc, 0 0 0.3em rgba(59, 165, 188, 0.6), 0 0.12em 2em transparent, -0.12em 0.15em 0.2em transparent;
}
input[type='checkbox']:checked + .pure-toggle.brick.switch .ok.no {
  top: 0;
  background: #cc0966;
  -moz-box-shadow: 0 0.12em 0.01em #9b074e, 0 0.12em 0.3em rgba(155, 7, 78, 0.6), 0 0.12em 2em rgba(0, 0, 0, 0.3), 0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0.12em 0.01em #9b074e, 0 0.12em 0.3em rgba(155, 7, 78, 0.6), 0 0.12em 2em rgba(0, 0, 0, 0.3), 0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2);
  box-shadow: 0 0.12em 0.01em #9b074e, 0 0.12em 0.3em rgba(155, 7, 78, 0.6), 0 0.12em 2em rgba(0, 0, 0, 0.3), 0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2);
}
input[type='checkbox']:checked + .pure-toggle.flip:before {
  -moz-animation: flip-back 0.5s ease-in-out forwards;
  -webkit-animation: flip-back 0.5s ease-in-out forwards;
  animation: flip-back 0.5s ease-in-out forwards;
}
input[type='checkbox']:checked + .pure-toggle.impossible:before {
  -moz-animation: impossible-back 0.5s ease-in-out forwards;
  -webkit-animation: impossible-back 0.5s ease-in-out forwards;
  animation: impossible-back 0.5s ease-in-out forwards;
}
@keyframes flip-back {
  0% {
    -moz-transform: rotateY(0deg) translateX(0) scale(1);
    -ms-transform: rotateY(0deg) translateX(0) scale(1);
    -webkit-transform: rotateY(0deg) translateX(0) scale(1);
    transform: rotateY(0deg) translateX(0) scale(1);
  }
  60%,
    80% {
    -moz-transform: rotateY(-360deg) translateX(0) scale(1.3);
    -ms-transform: rotateY(-360deg) translateX(0) scale(1.3);
    -webkit-transform: rotateY(-360deg) translateX(0) scale(1.3);
    transform: rotateY(-360deg) translateX(0) scale(1.3);
  }
  100% {
    margin-right: 3em;
    -moz-transform: rotateY(-360deg) translateX(0) scale(1);
    -ms-transform: rotateY(-360deg) translateX(0) scale(1);
    -webkit-transform: rotateY(-360deg) translateX(0) scale(1);
    transform: rotateY(-360deg) translateX(0) scale(1);
  }
}
@keyframes flip {
  0% {
    margin-right: 3em;
    -moz-transform: rotateY(0deg) translateX(0) scale(1);
    -ms-transform: rotateY(0deg) translateX(0) scale(1);
    -webkit-transform: rotateY(0deg) translateX(0) scale(1);
    transform: rotateY(0deg) translateX(0) scale(1);
  }
  60%,
    80% {
    -moz-transform: rotateY(360deg) translateX(0) scale(1.3);
    -ms-transform: rotateY(360deg) translateX(0) scale(1.3);
    -webkit-transform: rotateY(360deg) translateX(0) scale(1.3);
    transform: rotateY(360deg) translateX(0) scale(1.3);
  }
  100% {
    margin-right: 0;
    -moz-transform: rotateY(360deg) translateX(0) scale(1);
    -ms-transform: rotateY(360deg) translateX(0) scale(1);
    -webkit-transform: rotateY(360deg) translateX(0) scale(1);
    transform: rotateY(360deg) translateX(0) scale(1);
  }
}
@keyframes impossible-back {
  0% {
    -moz-transform: rotateX(0deg) translateX(0) scale(1);
    -ms-transform: rotateX(0deg) translateX(0) scale(1);
    -webkit-transform: rotateX(0deg) translateX(0) scale(1);
    transform: rotateX(0deg) translateX(0) scale(1);
  }
  60%,
    80% {
    -moz-transform: rotateX(-360deg) translateX(0) scale(1.3);
    -ms-transform: rotateX(-360deg) translateX(0) scale(1.3);
    -webkit-transform: rotateX(-360deg) translateX(0) scale(1.3);
    transform: rotateX(-360deg) translateX(0) scale(1.3);
  }
  100% {
    margin-right: 3em;
    -moz-transform: rotateX(-360deg) translateX(0) scale(1);
    -ms-transform: rotateX(-360deg) translateX(0) scale(1);
    -webkit-transform: rotateX(-360deg) translateX(0) scale(1);
    transform: rotateX(-360deg) translateX(0) scale(1);
  }
}
@keyframes impossible {
  0% {
    margin-right: 3em;
    -moz-transform: rotateX(0deg) translateX(0) scale(1);
    -ms-transform: rotateX(0deg) translateX(0) scale(1);
    -webkit-transform: rotateX(0deg) translateX(0) scale(1);
    transform: rotateX(0deg) translateX(0) scale(1);
  }
  60%,
    80% {
    -moz-transform: rotateX(360deg) translateX(0) scale(1.3);
    -ms-transform: rotateX(360deg) translateX(0) scale(1.3);
    -webkit-transform: rotateX(360deg) translateX(0) scale(1.3);
    transform: rotateX(360deg) translateX(0) scale(1.3);
  }
  100% {
    margin-right: 0;
    -moz-transform: rotateX(360deg) translateX(0) scale(1);
    -ms-transform: rotateX(360deg) translateX(0) scale(1);
    -webkit-transform: rotateX(360deg) translateX(0) scale(1);
    transform: rotateX(360deg) translateX(0) scale(1);
  }
}
@keyframes expand {
  0% {
    right: 0;
    width: 3em;
  }
  25% {
    right: 0;
    width: 100%;
  }
  50% {
    right: auto;
    width: 100%;
    left: 0;
  }
  100% {
    left: 0;
    width: 3em;
  }
}
@keyframes contract {
  0% {
    left: 0;
    width: 3em;
  }
  25% {
    left: 0;
    width: 100%;
  }
  50% {
    right: 0;
    width: 100%;
    left: auto;
  }
  100% {
    right: 0;
    width: 3em;
  }
}
@-webkit-keyframes flip-back {
  0% {
    -moz-transform: rotateY(0deg) translateX(0) scale(1);
    -ms-transform: rotateY(0deg) translateX(0) scale(1);
    -webkit-transform: rotateY(0deg) translateX(0) scale(1);
    transform: rotateY(0deg) translateX(0) scale(1);
  }
  60%,
    80% {
    -moz-transform: rotateY(-360deg) translateX(0) scale(1.3);
    -ms-transform: rotateY(-360deg) translateX(0) scale(1.3);
    -webkit-transform: rotateY(-360deg) translateX(0) scale(1.3);
    transform: rotateY(-360deg) translateX(0) scale(1.3);
  }
  100% {
    margin-right: 3em;
    -moz-transform: rotateY(-360deg) translateX(0) scale(1);
    -ms-transform: rotateY(-360deg) translateX(0) scale(1);
    -webkit-transform: rotateY(-360deg) translateX(0) scale(1);
    transform: rotateY(-360deg) translateX(0) scale(1);
  }
}
@-webkit-keyframes flip {
  0% {
    margin-right: 3em;
    -moz-transform: rotateY(0deg) translateX(0) scale(1);
    -ms-transform: rotateY(0deg) translateX(0) scale(1);
    -webkit-transform: rotateY(0deg) translateX(0) scale(1);
    transform: rotateY(0deg) translateX(0) scale(1);
  }
  60%,
    80% {
    -moz-transform: rotateY(360deg) translateX(0) scale(1.3);
    -ms-transform: rotateY(360deg) translateX(0) scale(1.3);
    -webkit-transform: rotateY(360deg) translateX(0) scale(1.3);
    transform: rotateY(360deg) translateX(0) scale(1.3);
  }
  100% {
    margin-right: 0;
    -moz-transform: rotateY(360deg) translateX(0) scale(1);
    -ms-transform: rotateY(360deg) translateX(0) scale(1);
    -webkit-transform: rotateY(360deg) translateX(0) scale(1);
    transform: rotateY(360deg) translateX(0) scale(1);
  }
}
@-webkit-keyframes impossible-back {
  0% {
    -moz-transform: rotateX(0deg) translateX(0) scale(1);
    -ms-transform: rotateX(0deg) translateX(0) scale(1);
    -webkit-transform: rotateX(0deg) translateX(0) scale(1);
    transform: rotateX(0deg) translateX(0) scale(1);
  }
  60%,
    80% {
    -moz-transform: rotateX(-360deg) translateX(0) scale(1.3);
    -ms-transform: rotateX(-360deg) translateX(0) scale(1.3);
    -webkit-transform: rotateX(-360deg) translateX(0) scale(1.3);
    transform: rotateX(-360deg) translateX(0) scale(1.3);
  }
  100% {
    margin-right: 3em;
    -moz-transform: rotateX(-360deg) translateX(0) scale(1);
    -ms-transform: rotateX(-360deg) translateX(0) scale(1);
    -webkit-transform: rotateX(-360deg) translateX(0) scale(1);
    transform: rotateX(-360deg) translateX(0) scale(1);
  }
}
@-webkit-keyframes impossible {
  0% {
    margin-right: 3em;
    -moz-transform: rotateX(0deg) translateX(0) scale(1);
    -ms-transform: rotateX(0deg) translateX(0) scale(1);
    -webkit-transform: rotateX(0deg) translateX(0) scale(1);
    transform: rotateX(0deg) translateX(0) scale(1);
  }
  60%,
    80% {
    -moz-transform: rotateX(360deg) translateX(0) scale(1.3);
    -ms-transform: rotateX(360deg) translateX(0) scale(1.3);
    -webkit-transform: rotateX(360deg) translateX(0) scale(1.3);
    transform: rotateX(360deg) translateX(0) scale(1.3);
  }
  100% {
    margin-right: 0;
    -moz-transform: rotateX(360deg) translateX(0) scale(1);
    -ms-transform: rotateX(360deg) translateX(0) scale(1);
    -webkit-transform: rotateX(360deg) translateX(0) scale(1);
    transform: rotateX(360deg) translateX(0) scale(1);
  }
}
@-webkit-keyframes expand {
  0% {
    right: 0;
    width: 3em;
  }
  25% {
    right: 0;
    width: 100%;
  }
  50% {
    right: auto;
    width: 100%;
    left: 0;
  }
  100% {
    left: 0;
    width: 3em;
  }
}
@-webkit-keyframes contract {
  0% {
    left: 0;
    width: 3em;
  }
  25% {
    left: 0;
    width: 100%;
  }
  50% {
    right: 0;
    width: 100%;
    left: auto;
  }
  100% {
    right: 0;
    width: 3em;
  }
}
    </style>
    <script>
  window.console = window.console || function(t) {};
</script>
  </head>
  <body class ="content">
  <header>
    <h1>Pure <strong>CSS</strong> Toggles</h1>
  </header>
  <form>
    <fieldset>
	 <legend>Flat look</legend>
	 <div>
	   <input id="pure-toggle-0" hidden="" type="checkbox">
	   <label class ="pure-toggle" for="pure-toggle-0"><span class ="fontawesome-ok"></span><span class ="fontawesome-remove"></span></label>
	 </div>
	 <div>
	   <input id="pure-toggle-1" checked="checked" hidden="" type="checkbox">
	   <label class ="pure-toggle flip" for="pure-toggle-1"><span class ="fontawesome-ok"></span><span class ="fontawesome-remove"></span></label>
	 </div>
	 <div>
	   <input id="pure-toggle-2" hidden="" type="checkbox">
	   <label class ="pure-toggle impossible" for="pure-toggle-2"><span class ="fontawesome-ok"></span><span class ="fontawesome-remove"></span></label>
	 </div>
	 <div>
	   <input id="pure-toggle-3" checked="checked" hidden="" type="checkbox">
	   <label class ="pure-toggle wide" for="pure-toggle-3"><span class ="fontawesome-ok"></span><span class ="fontawesome-remove"></span></label>
	 </div>
    </fieldset>
    <fieldset>
	 <legend>3D look</legend>
	 <div>
	   <input id="pure-toggle-4" hidden="" type="checkbox">
	   <label class ="pure-toggle brick" for="pure-toggle-4"><span class ="fontawesome-ok"></span><span class ="fontawesome-remove"></span></label>
	 </div>
	 <div>
	   <input id="pure-toggle-5" hidden="" type="checkbox">
	   <label class ="pure-toggle brick switch" for="pure-toggle-5"><span class ="fontawesome-ok ok"></span><span class ="fontawesome-remove no ok"></span></label>
	 </div>
    </fieldset>
  </form>
<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
</body></html>

==========================

کد HTML:
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="google" value="notranslate">
    <title>CodePen - Pure Css "day and night" toggle</title>
    <link href="WQBNxO_data/css.css" rel="stylesheet" type="text/css">
	   <style>
	 body {
  background-color: #1E314F;
  font-family: 'Helvetica Rounded', 'Arial Rounded MT Bold','Montserrat', sans-serif;
  color: #fff;
}
.toggleWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  padding: 0 200px;
  transform: translate3d(-50%, -50%, 0);
}
.toggleWrapper input {
  position: absolute;
  left: -99em;
}
.toggle {
  cursor: pointer;
  display: inline-block;
  position: relative;
  width: 90px;
  height: 50px;
  background-color: #83D8FF;
  border-radius: 84px;
  transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.toggle:before {
  content: 'AM';
  position: absolute;
  left: -50px;
  top: 15px;
  font-size: 18px;
}
.toggle:after {
  content: 'PM';
  position: absolute;
  right: -48px;
  top: 15px;
  font-size: 18px;
  color: #749ED7;
}
.toggle__handler {
  display: inline-block;
  position: relative;
  z-index: 1;
  top: 3px;
  left: 3px;
  width: 44px;
  height: 44px;
  background-color: #FFCF96;
  border-radius: 50px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: rotate(-45deg);
}
.toggle__handler .crater {
  position: absolute;
  background-color: #E8CDA5;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
  border-radius: 100%;
}
.toggle__handler .crater--1 {
  top: 18px;
  left: 10px;
  width: 4px;
  height: 4px;
}
.toggle__handler .crater--2 {
  top: 28px;
  left: 22px;
  width: 6px;
  height: 6px;
}
.toggle__handler .crater--3 {
  top: 10px;
  left: 25px;
  width: 8px;
  height: 8px;
}
.star {
  position: absolute;
  background-color: #ffffff;
  transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
  border-radius: 50%;
}
.star--1 {
  top: 10px;
  left: 35px;
  z-index: 0;
  width: 30px;
  height: 3px;
}
.star--2 {
  top: 18px;
  left: 28px;
  z-index: 1;
  width: 30px;
  height: 3px;
}
.star--3 {
  top: 27px;
  left: 40px;
  z-index: 0;
  width: 30px;
  height: 3px;
}
.star--4,
.star--5,
.star--6 {
  opacity: 0;
  transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.star--4 {
  top: 16px;
  left: 11px;
  z-index: 0;
  width: 2px;
  height: 2px;
  transform: translate3d(3px, 0, 0);
}
.star--5 {
  top: 32px;
  left: 17px;
  z-index: 0;
  width: 3px;
  height: 3px;
  transform: translate3d(3px, 0, 0);
}
.star--6 {
  top: 36px;
  left: 28px;
  z-index: 0;
  width: 2px;
  height: 2px;
  transform: translate3d(3px, 0, 0);
}
input:checked + .toggle {
  background-color: #749DD6;
}
input:checked + .toggle:before {
  color: #749ED7;
}
input:checked + .toggle:after {
  color: #ffffff;
}
input:checked + .toggle .toggle__handler {
  background-color: #FFE5B5;
  transform: translate3d(40px, 0, 0) rotate(0);
}
input:checked + .toggle .toggle__handler .crater {
  opacity: 1;
}
input:checked + .toggle .star--1 {
  width: 2px;
  height: 2px;
}
input:checked + .toggle .star--2 {
  width: 4px;
  height: 4px;
  transform: translate3d(-5px, 0, 0);
}
input:checked + .toggle .star--3 {
  width: 2px;
  height: 2px;
  transform: translate3d(-7px, 0, 0);
}
input:checked + .toggle .star--4,
input:checked + .toggle .star--5,
input:checked + .toggle .star--6 {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
input:checked + .toggle .star--4 {
  transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
input:checked + .toggle .star--5 {
  transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
input:checked + .toggle .star--6 {
  transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
    </style>
    <script>
  window.console = window.console || function(t) {};
</script>
  </head>
  <body>
 <div class ="toggleWrapper">
  <input class ="dn" id="dn" type="checkbox">
  <label for="dn" class ="toggle">
    <span class ="toggle__handler">
	 <span class ="crater crater--1"></span>
	 <span class ="crater crater--2"></span>
	 <span class ="crater crater--3"></span>
    </span>
    <span class ="star star--1"></span>
    <span class ="star star--2"></span>
    <span class ="star star--3"></span>
    <span class ="star star--4"></span>
    <span class ="star star--5"></span>
    <span class ="star star--6"></span>
  </label>
</div>
<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
</body></html>

==========================

کد HTML:
<!DOCTYPE html>
<html class =" -moz-"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="google" value="notranslate">
    <title>CodePen - Funny toggle switch</title>
    <link rel="stylesheet" href="wtFne_data/reset.css">
	   <style>
	 body {
  background : #eee;
  padding-top : 20px;
}
#switch , #switch1 {
  position: absolute;
  left: -9999px;
}
.switch {
  display : block;
  position: relative;
  width   : 120px;
  padding : 3px;
  margin  : 20px auto;
  cursor  : pointer;
  border-radius : 33px;
  background    : #ffcc00;
  box-shadow    :  0 1px 1px 0 rgba(0,0,0,.3);
}
.switch:before , .switch:after {
  display : block;
  color   : #fff;
  position : absolute;
  font-size : 30px;
  top : 15px;
  z-index : 0;
}
.switch:before {
  left : 15px;
  content : '✔';
}
.switch:after {
  right : 15px;
  content : '✖';
}
span {
  display : block;
  width   : 39px;
  height  : 41px;
  border  : 7px solid #848484;
  border-radius : 50%;
  position	 : relative;
  left		: 0;
  transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) left;
}
.switch span {
  left : 68px;
}
.switch1 span {
  left : 0px;
}

span:after , span:before { 
  display : block;
  content : ' ';
  position: absolute;
  z-index : 999;
  transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;	   
}
span:before {
  width  : 100%;
  height : 34px;
  top  : 0; 
  left : 0;
  background-color: #fff;
  border-radius : inherit;
  border-top    : 4px solid #ffcc00;
  border-bottom : 3px solid #ffcc00;
}
.switch1 span:before {
  border-top-width : 20px;
  height : 19px;
}
span:after {
  width  : 3px;
  height : 3px;		
  top : 0;
  left : 0;
  bottom : 0;
  right : 0;
  margin : auto;
  background-color: #000;
  box-shadow : -2px -2px 0 0px #fff , 0 0 1px 3px #4e341c ;
  border-radius : 50%;
}
.switch1 span:after {
  top : 10px;
  left : -20px;
}
#switch:checked + .switch span {
  transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) left;
  left  : 0px;
}
#switch:checked + .switch span:before {
  transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
  border-top-width : 20px;
  height : 19px;
}
#switch:checked + .switch span:after{
  transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
  top : 10px;
  left : -20px;
}
#switch1:checked + .switch span {
  transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) left;
  left  : 68px;
}
#switch1:checked + .switch span:before {
  transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
  border-top-width : 4px;
  height : 34px;
}
#switch1:checked + .switch span:after{
  transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
  top  : 0;
  left : 0;
}
    </style>
    <script>
  window.console = window.console || function(t) {};
</script>
	   <script src="wtFne_data/prefixfree.js"></script>
  </head>
  <body>
    <input name="switch" id="switch" type="checkbox">
<label for="switch" class ="switch">
  <span></span>
</label>
<input name="switch" id="switch1" type="checkbox">
<label for="switch1" class ="switch switch1">
  <span></span>
</label>
    <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
</body></html>

لینک مرجع