A CodePen by xav76. Push / Check (inspired) - Inspired by a dribbble shot create by Diego Monzon more info: http://dribbble.com/shots/774883-Push-Check?list=following

index.html

</br></br>
<div id="warp">
  Inspired CSS version of Push / Check
  	<div class="minimal push">
			<label class="check" >
				<input class="push-btn" type="checkbox" name="push-btn" value="" checked="checked">PUSH
			</label>
		</div>
		</br></br>
		<div class="push">
			<label class="check" >
				<input class="push-btn" type="checkbox" name="push-btn" value="" checked="checked">PUSH
			</label>
		</div>
		</br></br>
Inspired by <a target="_blank" href="http://dribbble.com/shots/774883-Push-Check?list=following">this  shot</a> create by Diego Monzon
		<img src="http://dribbble.s3.amazonaws.com/users/11040/screenshots/774883/push.png" alt="Push / Check" title="Push / Check" />
<span class="remarque">i don't found the font used if someone know it say it..! thanks</span>
	</div>

style.css

/*CSS Reset*/
  	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, font, img, ins, kbd, q, s, samp,
		small, strike, strong, sub, sup, tt, var,
		b, u, i, center,
		dl, dt, dd, ol, ul, li,
		label, legend,
		table, caption, tbody, tfoot, thead, tr, th, td,
		button,form, fieldset, input, textarea {
		margin: 0;
		padding: 0;
		outline: 0;
		border: 0;
		background: transparent;
		vertical-align: baseline;
		font-size: 100%;
		}
		body {line-height: 1;}
		h1, h2, h3, h4, h5, h6 {font-weight: normal;}
		ol, ul {list-style: none;}
		blockquote, q {quotes: none;}
		blockquote:before, blockquote:after,
		*:before, *:after {content: '';content: none;}
		:focus {outline: 0;}
		ins {text-decoration: none;}
		del {text-decoration: line-through;}
		table {border-spacing: 0;border-collapse: collapse;}
		address, caption, cite, code, dfn, em, strong, var { font-weight: normal; font-style: normal;}
		caption, th { text-align: left; font-weight: normal; font-style: normal;}
		/*Starting block */
		/*by 10tribu */
		*{transition:all .5s ease-out;}
		body {
			background-color: #ced2d9;
			font-weight: 400;
			font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
			}
		#warp {
		   margin:0 auto;
		   width:400px;
  text-align:center;
		}
		/* contour */
		div.push{
			position: relative;
			margin:5px auto;
			padding: 6px 8px;
			width: 172px;
			height: 60px;
			border-radius: 25px;
			background-image: linear-gradient(bottom, rgba(255,255,255,.17) 0%, rgba(15,16,16,.17) 100%);
			background-clip: padding-box;
		}
		div.minimal{
			position: relative;
			margin:10px auto -20px;
			padding: 6px 8px;
			width: 172px;
			height: 60px;
			background-image: none;
		}
		/* contour arriere du bouton */
		div.push:after{
			position: absolute;
			top: 6px;
			left: 4px;
			padding: 4px;
			width: 170px;
			height: 54px;
			border-radius: 17px;
			background-color: #4b5461;
			background-clip: padding-box;
			box-shadow: 0 4px 6px 2px rgba(15,16,16,.49);
			content: "";
		}
		div.minimal:after{display: none;}
		/* Bouton */
		label.check{
			position: relative;
			z-index: 20;
			display: block;
			margin: 2px 0 0;
			padding: 14px 18px;
			width: 134px;
			height: 28px;
			border-radius: 14px;
			background-color: #b3bbc5;
			background-image: linear-gradient(bottom, rgba(0,0,0,.24) -2.65%, rgba(255,255,255,.24) 97.35%);
			background-clip: padding-box;
			box-shadow: 0 2px 6px 2px rgba(15,16,16,.49),inset 0 3px rgba(255,255,255,0.75);
			color: #464950;
			text-align: left;
			text-indent: 50px;
			font-size: 28px;
			line-height:28px;
			cursor: pointer;
			user-select: none;
		}
		div.push label.check:hover{
			background-color: #bbc4cf;
		}
		div.minimal label.check:hover{background-color: #959ca7;}
		div.push label.check:active{
			background-image: linear-gradient(bottom, rgba(0,0,0,.34) -2.65%, rgba(255,255,255,.14) 97.35%);
			transform: scale(0.95);
		}

		div.push label.check:active ~ div.push:after {/* no work */
			transform: scale(0.95);}
		div.minimal label.check{
			background-color: #959ca7;
			background-image: none;
			box-shadow: none;
			color: #d5dadf;
			cursor: default;
		}
		div.minimal label.check:active{
			margin:2px 0 0;
			background-image: none;
			transform: scale(0.99);
			}
		/* reflet du bouton */
		label.check:after{
			position: absolute;
			top: 2px;
			left: 0px;
			width: 170px;
			height: 28px;
			border-radius: 14px 14px 0px 0px / 14px 14px 0px 0px;
			background-color:  rgba(255,255,255,.21) ;
			background-clip: padding-box;
			content: "";
		}
		label.check:hover:after{background-color:  rgba(255,255,255,.32) ;}
		div.minimal label.check:after{display: none;}
		/* checkbox */
		input[type="checkbox"].push-btn{
			position: absolute;
			left: 0px;
			z-index: 20;
			display: inline-block;
			float: left;
			margin: -2px 20px 0 15px;
			width: 33px;
			height: 33px;
			border-radius: 4px;
			background-color: rgba(69, 75, 88, 1.000);
			background-image: linear-gradient(bottom, rgba(235,235,235,.27) 0%, rgba(17,17,18,.27) 100%);
			background-clip: padding-box;
			box-shadow: 0 0 6px rgba(245,245,245,.2), inset 0 0 8px rgba(15,16,16,.75);
			appearance: none;
		}
		div.minimal input[type="checkbox"].push-btn{
			background-color: #d5dadf;
			background-image: none;
      box-shadow:none;
			}
		/* case coché */
		input[type="checkbox"].push-btn:checked:after{
			position: absolute;
			top: -2px;
			left: 4px;
			display: block;
			color: white;
			content: "✓";
			text-shadow: 0px 1px 2px black;
			font-weight: 300;
			font-family: "Charcoal CY";
		}
		div.minimal input[type="checkbox"].push-btn:checked:after{
			position: absolute;
			top: -2px;
			left: 4px;
			display: block;
			color: #959ca7;
			content: "✓";
			text-shadow: none;
		}
/* codepen add */
.remarque{font-size:10px;}
a{color:gray;text-decoration:none;}