A bunch of funky CSS3 Toggle Buttons

<!-- A variety of CSS toggle button effects, from varying sources fo inspiration.

No JS, all CSS and HTML.

Tested in IE10, Chrome, Firefox, Safari
-->

<h1>A bunch of funky CSS3 Toggle Buttons <a href="https://twitter.com/AshNolan_" target="blank">created by @AshNolan_</a></h1>

<!-- Inspiration – https://dribbble.com/shots/1909289-Day-Night-Toggle-Button-GIF?list=searches&tag=toggle&offset=8

Also see this pen, which beat me to it for an alternative implementation!
https://codepen.io/jsndks/pen/qEXzOQ
-->
<h2 class="headingOuter">Day/Night Toggle</h2>
		<div class="toggle toggle--daynight">
			<input type="checkbox" id="toggle--daynight" class="toggle--checkbox">
			<label class="toggle--btn" for="toggle--daynight"><span class="toggle--feature"></span></label>
		</div>

<h2 class="headingOuter">Like Toggle</h2>
		<div class="toggle toggle--like">
			<input type="checkbox" id="toggle--like" class="toggle--checkbox">
			<label class="toggle--btn" for="toggle--like"><span class="toggle--feature"></span></label>
		</div>

<h2 class="headingOuter">Shadow Effect Toggle</h2>
		<div class="toggle toggle--text">
			<input type="checkbox" id="toggle--text" class="toggle--checkbox">
			<label class="toggle--btn" for="toggle--text" data-label-on="on"  data-label-off="off"></label>
		</div>

<h2 class="headingOuter">3d Power button toggles</h2>
		<div class="toggle toggle--push">
			<input type="checkbox" id="toggle--push" class="toggle--checkbox">
			<label class="toggle--btn" for="toggle--push" data-label-on="on"  data-label-off="off"></label>
		</div>
		<div class="toggle toggle--push toggle--push--glow">
			<input type="checkbox" id="toggle--push--glow" class="toggle--checkbox">
			<label class="toggle--btn" for="toggle--push--glow" data-label-on="on"  data-label-off="off"></label>
		</div>

<h2 class="headingOuter">Physical Toggle Switch</h2>
		<div class="toggle toggle--knob">
			<input type="checkbox" id="toggle--knob" class="toggle--checkbox">
			<label class="toggle--btn" for="toggle--knob"><span class="toggle--feature" data-label-on="on"  data-label-off="off"></span></label>
		</div>

<h2 class="headingOuter">Sliding Switch Toggle</h2>
		<div class="toggle toggle--switch">
			<input type="checkbox" id="toggle--switch" class="toggle--checkbox">
			<label class="toggle--btn" for="toggle--switch"><span class="toggle--feature" data-label-on="on"  data-label-off="off"></span></label>
		</div>

<h2 class="headingOuter">Neon Text toggle</h2>
		<div class="toggle toggle--neon">
			<input type="checkbox" id="toggle--neon" class="toggle--checkbox">
			<label class="toggle--btn" for="toggle--neon" data-label-on="on"  data-label-off="off"></label>
		</div>