Radio Buttons

HTML

<form action="" method="POST" autocomplete="off" enctype="multipart/form-data">
	<!-- Default Radio Button -->
	<div class="controls_wrap">
		<input type="radio" name="gender" class="radio_button" id="male" value="Male">
		<label for="male">Male</label>
		
		<input type="radio" name="gender" class="radio_button" id="female" value="Female">
		<label for="female">Female</label>
	</div>
	
	<!-- Custom Radio Button -->
	<div class="controls_wrap">
		<input type="radio" name="options" class="custom_radio_button" id="option1" value="Option 1">
		<label for="option1">
			<span class="radio_button_design"></span>
			<span class="radio_button_text">Option 1</span>
		</label>
		
		<input type="radio" name="options" class="custom_radio_button" id="option2" value="Option 1">
		<label for="option2">
			<span class="radio_button_design"></span>
			<span class="radio_button_text">Option 2</span>
		</label>
	</div>
</form>

CSS

/* Default Radio Button */
.radio_button{position:absolute;left:-999.9rem}
.radio_button + label{display:inline-block;font-size:1.6rem;padding:0 0 0 3rem;margin:0 2rem 1rem 0;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;position:relative}
.radio_button + label::before{content:'';position:absolute;top:0;left:0;right:0;display:block;width:2rem;height:2rem;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;background-color:#fff;border:.1rem solid #ccc;-webkit-transition:all .3s ease;-o-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease}
.radio_button:checked + label::before{border-color:#09a5be;background-color:#09a5be}
.radio_button:checked + label::after{content:'';position:absolute;top:.2rem;left:.2rem;display:block;width:1.6rem;height:1.6rem;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;background-color:#09a5be;border:.3rem solid #fff}

/* Custom Radio Button */
.custom_radio_button{position:absolute;left:-999.9rem}
.custom_radio_button + label{display:-webkit-inline-box;display:-webkit-inline-flex;display:-moz-inline-box;display:-ms-inline-flexbox;display:inline-flex;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;font-size:0;margin:0 2rem 1rem 0}
.custom_radio_button + label .radio_button_design{-webkit-box-flex:0;-webkit-flex:0 0 2rem;-moz-box-flex:0;-ms-flex:0 0 2rem;flex:0 0 2rem;width:2rem;height:2rem;border:.1rem solid #ccc;background-color:#fff;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;position:relative;-webkit-transition:all .2s ease;-o-transition:all .2s ease;-moz-transition:all .2s ease;transition:all .2s ease}
.custom_radio_button + label .radio_button_design::before,.custom_radio_button + label .radio_button_design::after{content:"";position:absolute;top:0;left:0;display:block;width:100%;height:100%;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;background-color:#09a5be;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0)}
.custom_radio_button + label .radio_button_design::before{opacity:1}
.custom_radio_button + label .radio_button_text{display:inline-block;font-size:1.6rem;padding:0 0 0 1rem}
.custom_radio_button:checked + label .radio_button_design{border-color:#09a5be;border-width:.2rem}
.custom_radio_button:checked + label .radio_button_design::before,.custom_radio_button:checked + label .radio_button_design::after{-webkit-transition:all .6s ease;-o-transition:all .6s ease;-moz-transition:all .6s ease;transition:all .6s ease}
.custom_radio_button:checked + label .radio_button_design::before{opacity:0;-webkit-transform:scale(3.5);-moz-transform:scale(3.5);-ms-transform:scale(3.5);-o-transform:scale(3.5);transform:scale(3.5)}
.custom_radio_button:checked + label .radio_button_design::after{-webkit-transform:scale(0.55);-moz-transform:scale(0.55);-ms-transform:scale(0.55);-o-transform:scale(0.55);transform:scale(0.55)}

@media (-ms-high-contrast: none),(-ms-high-contrast: active),(-moz-touch-enabled: 0),(hover: hover) {
	.custom_radio_button + label:hover .radio_button_design{border-color:#09a5be}
}

SCSS

/* Vars */
$white: #ffffff;
$grey:  #cccccc;
$main:  #09a5be;
		
/* Default Radio Button */
.radio_button {
	position: absolute;
	left: -999.9rem;
	
	+ label {
		display: inline-block;
		font-size: 1.6rem;
		padding: 0 0 0 3rem;
		margin: 0 2rem 1rem 0;
		border-radius: 50%;
		user-select: none;
		cursor: pointer;
		position: relative;
		
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			display: block;
			width: 2rem;
			height: 2rem;
			border-radius: 50%;
			background-color: $white;
			border: .1rem solid $grey;
			transition: all 0.3s ease;
		}
	}
	
	&:checked + label {
		&::before {
			border-color: $main;
			background-color: $main;
		}
		
		&::after {
			content: '';
			position: absolute;
			top: 0.2rem;
			left: 0.2rem;
			display: block;
			width: 1.6rem;
			height: 1.6rem;
			border-radius: 50%;
			background-color: $main;
			border: .3rem solid $white;
		}
	}
}

/* Custom Radio Button */
.custom_radio_button {
	position: absolute;
	left: -999.9rem;
	
	+ label {
		display: inline-flex;
		align-items: center;
		user-select: none;
		cursor: pointer;
		font-size: 0;
		margin: 0 2rem 1rem 0;
		
		.radio_button_design {
			flex: 0 0 2rem;
			width: 2rem;
			height: 2rem;
			border: .1rem solid $grey;
			background-color: $white;
			border-radius: 50%;
			position: relative;
			transition: all .2s ease;
			
			&::before, &::after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background-color: $main;
				transform: scale(0);
			}
			
			&::before {
				opacity: 1;
			}
		}
		
		.radio_button_text {
			display: inline-block;
			font-size: 1.6rem;
			padding:0 0 0 1rem;
		}
	}
	
	&:checked + label {
		.radio_button_design {
			border-color: $main;
			border-width: .2rem;
			
			&::before, &::after {
				transition: all .6s ease;
			}
			
			&::before {
				opacity: 0;
				transform: scale(3.5);
			}
			
			&::after {
				transform: scale(.55);
			}
		}
	}
}

@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
	.custom_radio_button + label:hover .radio_button_design {border-color: $main}
}