<div class="wrap">
	<input type="radio" id="rad1" name="rads">
	<label for="rad1"></label>
	<input type="radio" id="rad2" name="rads" >
	<label for="rad2"></label>
	<input type="radio" id="rad3" name="rads">
	<label for="rad3"></label>
</div>
body {
	background: #75FF75;
}

.wrap {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
}

input {
	display: none;
}

label {
	cursor: pointer;
	margin: 10px 10px;
}

label:before {
	content: '';
	display: inline-block;
	height: 30px;
	width: 30px;
	background: #59CA59;
	border-radius: 50%;
	z-index: 2;
	transition: box-shadow .4s ease,
					background .3s ease;
}

input:checked + label:before {
	box-shadow: inset 0px 3px 0 2px rgba(89,202,89,1);
	background: #fff;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.