Pure CSS Toggle

HTML

<label class="checkbox toggle candy" onclick=""  style="width:100px">
		<input id="view" type="checkbox" />
		<p>
			<span>ON</span>
			<span>OFF</span>
		</p>
		
		<a class="slide-button"></a>
       
 <ul class="filters">
     <br />
     <br />
        <li>
          <a href="#">FILTER 1</a>           
        </li>
        <li>
            <a href="#">FILTER 2</a>            
        </li>  
 </ul>
    
   </label>

CSS

/* ------------------------------------------
CSS TOGGLE SWITCHES (IonuČ› Colceriu)
Licensed under Unlicense 
https://github.com/ghinda/css-toggle-switch
------------------------------------------ */

/* Hide by default */

.switch .slide-button,
.toggle p span {
	display: none;
}

/* Toggle Switches */

/* We can't test for a specific feature,
 * so we only target browsers with support for media queries.
 */
@media only screen {

	/* Checkbox
	 */
	.toggle {
		position: relative;
		padding: 0;
		margin-left: 100px;
	}

	/* Position the label over all the elements, except the slide-button
	 * Clicking anywhere on the label will change the switch-state
	 */
	.toggle label {
		position: relative;
		z-index: 3;
		
		display: block;
		width: 100%;
	}

	/* Don't hide the input from screen-readers and keyboard access
	 */
	.toggle input {
		position: absolute;
		opacity: 0;
		z-index: 5;
	}
	
	.toggle p {
		position: absolute;
		left: -100px;
		
		width: 100%;
		margin: 0;
		padding-right: 100px;
		
		text-align: left;
	}
	
	.toggle p span {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 5;
		
		display: block;
		width: 50%;
		margin-left: 100px;
		
		text-align: center;
	}
	
	.toggle p span:last-child {
		left: 50%;
	}

	.toggle .slide-button {
		position: absolute;
		right: 0;
		top: 0;
		z-index: 4;
		
		display: block;
		width: 50%;
		height: 100%;
		padding: 0;
	}

	/* Shared */
	.toggle,
	.switch {
		display: block;
		height: 30px;
	}
	
	.switch *,
	.toggle * {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	.switch .slide-button,
	.toggle .slide-button {
		display: block;
		
		-webkit-transition: all 0.3s ease-out;
		-moz-transition: all 0.3s ease-out;
		-ms-transition: all 0.3s ease-out;
		-o-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out;
	}
	
	.toggle label,
	.toggle p,
	.switch label {
		line-height: 30px;
		vertical-align:...