Google Material Radio Buttons Paper Circle Button

HTML

<h3>Keep Wi-Fi on during sleep</h3>

<label class="paper-radio__label">
	<input type="radio" class="paper-radio__button" name="wifi[]" value="1" checked>
	Always
</label>

<label class="paper-radio__label">
	<input type="radio" class="paper-radio__button" name="wifi[]" value="1">
	Only when plugged in
</label>

<label class="paper-radio__label">
	<input type="radio" class="paper-radio__button" name="wifi[]" value="1">
	Never
</label>

<h3>Wi-Fi frequency band</h3>

<label class="paper-radio__label">
	<input type="radio" class="paper-radio__button" name="frequency[]" value="1" checked>
	Auto
</label>

<label class="paper-radio__label">
	<input type="radio" class="paper-radio__button" name="frequency[]" value="1">
	5 GHz only
</label>

<label class="paper-radio__label">
	<input type="radio" class="paper-radio__button" name="frequency[]" value="1">
	2.4 GHz only
</label>

SCSS

html {
	box-sizing: border-box;
    padding: 20px;
    font-family: Roboto;
}

*,
*::after,
*::before {
	box-sizing: inherit;
}

.paper-radio__label {
	position: relative;

	display: inline-block;

	width: 100%;
	margin: 12px;

	cursor: pointer;
}

.paper-radio__button {
	display: none;
	visibility: hidden;
}

.paper-radio__outer-circle {
	position: relative;
	top: 2px;

	display: inline-block;

	width: 32px;
	height: 32px;
	margin-right: 10px;

	cursor: pointer;

	border: 2px solid #5a5a5a;
	border-radius: 50%;
}

.paper-radio__inner-circle {
	position: absolute;
	z-index: 1;
	top: 8px;
	left: 6px;

	width: 20px;
	height: 20px;

	transition: all .3s ease-in;
	-webkit-transform: scale3d(0,0,0);
			transform: scale3d(0,0,0);

	border-radius: 50%;
	background: #34ace7;

	.paper-radio__button:checked ~ & {
		-webkit-transform: scale3d(1,1,1);
				transform: scale3d(1,1,1);
	}
}

.paper-radio__ripple {
	position: absolute;
	z-index: 2;
	top: 10px;
	left: 9px;

	width: 15px;
	height: 15px;

	transition: opacity .2s ease-in-out;

	opacity: 0;
	border-radius: 50%;
	background: #34ace7;

	&.is-active {
		opacity: .2;
	}
}

JavaScript

var radios = document.querySelectorAll('.paper-radio__label');

for(i=0; i < radios.length; i++){
	var outer = document.createElement('span');
	outer.classList.add('paper-radio__outer-circle');

	var inner = document.createElement('span');
	inner.classList.add('paper-radio__inner-circle');

	var ripple = document.createElement('span');
	ripple.classList.add('paper-radio__ripple');

	var radiobutton = radios[i].querySelector('.paper-radio__button');

	radios[i].insertBefore(outer, radiobutton);
	radios[i].appendChild(inner);
	radios[i].appendChild(ripple);

	radios[i].addEventListener('click', letItRip);
}

function letItRip(e) {
	var ripple = this.querySelector('.paper-radio__ripple');
	
	if (ripple === null) {
		return;
	}

	ripple.classList.add('is-active');
	
	var removeRip = function(e) {
		this.classList.remove('is-active');	
	}

	ripple.addEventListener('webkitTransitionEnd', removeRip);
	ripple.addEventListener('oTransitionEnd', removeRip);
	ripple.addEventListener('transitionEnd', removeRip);
}