SOURCE

<div class="wrapper">
	<input type="radio" name="rd" class="rd" id="rd1">
	<label for="rd1"></label>
	<span style="margin-right: 10px;"></span>
	<input type="radio" name="rd" class="rd" id="rd2" checked>
	<label for="rd2"></label>
	<span style="margin-right: 10px;"></span>
	<input type="radio" name="rd" class="rd" id="rd3">
	<label for="rd3"></label>
	<span style="margin-right: 10px;"></span>
	<input type="radio" name="rd" class="rd" id="rd4">
	<label for="rd4"></label>
	<span style="margin-right: 10px;"></span>
	<input type="radio" name="rd" class="rd" id="rd5">
	<label for="rd5"></label>		
</div>

.wrapper {
	width: 500px;
	height: 400px;
	margin: 100px auto;
	text-align: center;
}
.rd {
	display: none;
}
.rd + label {
	display: inline-block;
	position: relative;
	cursor: pointer;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: #cecece;
	box-shadow: 0 1px 15px rgba(0, 0, 0, 0.1) inset, 0 1px 4px rgba(0, 0, 0, 0.1) inset, 1px -1px 2px rgba(0, 0, 0, 0.1);	
}
.rd + label:before {
	content: '';
	position: absolute;
	top: 12px;
	left: 12px;		
	z-index: 500;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: #f1f1f1;
	-webkit-transition: all 0.15s ease-in;
	transition: all 0.15s ease-in;
}
.rd:checked + label {
	background: #059acb;	
}
.rd:checked + label:before {
	content: '';
	position: absolute;
	top: 4px;
	left: 4px;
	width: 16px;
	height: 16px;			
}