Fancy and Animated Radio Buttons - Snippet

Preview
HTML
CSS
JS

<div style="text-align: center;">
	<label class="button">
	<input type="radio" name="button" />
	<span class="outer"><span class="inner"></span></span>
	Choice 1
	</label>
	<label class="button">
		<input type="radio" name="button" />
		<span class="outer"><span class="inner"></span></span>
		Choice 2
	</label>
	<label class="button">
		<input type="radio" name="button" />
		<span class="outer"><span class="inner"></span></span>
		Choice 3
	</label>
</div>

.button {
	background: #cfe7fa;
	background: -moz-linear-gradient(top,  #cfe7fa 0%, #6393c1 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cfe7fa), color-stop(100%,#6393c1));
	background: -webkit-linear-gradient(top,  #cfe7fa 0%,#6393c1 100%);
	background: -o-linear-gradient(top,  #cfe7fa 0%,#6393c1 100%);
	background: -ms-linear-gradient(top,  #cfe7fa 0%,#6393c1 100%);
	background: linear-gradient(top,  #cfe7fa 0%,#6393c1 100%);
	border: 1px solid #6393c1;
	-moz-border-radius: 40px;
	-webkit-border-radius: 40px;
	border-radius: 40px;
	-moz-box-shadow: inset 1px 1px 0px rgba(255, 255, 255, .5), inset -1px -1px 0px rgba(0, 0, 0, .5);
	-webkit-box-shadow: inset 1px 1px 0px rgba(255, 255, 255, .5), inset -1px -1px 0px rgba(0, 0, 0, .5);
	box-shadow: inset 1px 1px 0px rgba(255, 255, 255, .5), inset -1px -1px 0px rgba(0, 0, 0, .5);
	cursor: pointer;
	display: inline-block;
	font: 15px Arial, Verdana, Geneva, sans-serif;
	line-height: 41px;
	padding-right: 20px;
}
.button:hover .inner {
	opacity: .5;
}
.button input {
	display: none;
}
.button input:checked + .outer .inner {
	opacity: 1;
}
.button .outer {
	background: #2989d8;
	background: -moz-radial-gradient(center, ellipse cover,  #2989d8 0%, #101354 99%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#2989d8), color-stop(99%,#101354));
	background: -webkit-radial-gradient(center, ellipse cover,  #2989d8 0%,#101354 99%);
	background: -o-radial-gradient(center, ellipse cover,  #2989d8 0%,#101354 99%);
	background: -ms-radial-gradient(center, ellipse cover,  #2989d8 0%,#101354 99%);
	background: radial-gradient(center, ellipse cover,  #2989d8 0%,#101354 99%);
	border: 1px solid black;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	display: block;
	float: left;
	height: 20px;
	margin: 10px;
	width: 20px;
}
.button .inner {
	background: #e4f5fc;
	background: -moz-radial-gradient(center, ellipse cover,  #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#e4f5fc), color-stop(50%,#bfe8f9), color-stop(51%,#9fd8ef), color-stop(100%,#2ab0ed));
	background: -webkit-radial-gradient(center, ellipse cover,  #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);
	background: -o-radial-gradient(center, ellipse cover,  #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);
	background: -ms-radial-gradient(center, ellipse cover,  #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);
	background: radial-gradient(center, ellipse cover,  #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	display: block;
	height: 14px;
	margin: 3px;
	opacity: 0;
	-moz-transition: opacity .5s;
	-webkit-transition: opacity .5s;
	-o-transition: opacity .5s;
	transition: opacity .5s;
	width: 14px;
}