%main
	%fieldset
		.container
			.svg
				%input#radio-svg{:type => "radio", :name => "option"}
				%div
				%svg{:viewBox => "0 0 24 24"}
					- 2.times do
						%circle{:cx => "12", :cy => "12", :r => "8"}
			%label{:for => "radio-svg"} SVG
	%fieldset
		.container
			.html
				%input#radio-html{:type => "radio", :name => "option"}
				- 3.times do
					%div
			%label{:for => "radio-html"} HTML
					
View Compiled
fieldset {
	.container {
		display: flex;
		align-items: center;
		align-content: center;
		> div {
			position: relative;
			overflow: hidden;
			border-radius: 100%;
		}
	}
	input {
		cursor: pointer;
		appearance: none;
		opacity: 0;
		position: absolute;
		z-index: 10;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		margin: 0;
	}
	label {
		cursor: pointer;
		margin-left: $p/2;
	}
	&:not(:first-child) {
		margin-top: $p;
	}
}

.svg {
	div {
		transition: all 150ms ease-out;
		will-change: background;
		position: absolute;
		z-index: 0;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: mix($slate, $grey, 20%);
	}
	svg {
		position: relative;
		z-index: 2;
		display: block;
		width: 24px;
		height: 24px;
		circle {
			&:nth-child(1) {
				transition: fill 150ms ease-out;
				will-change: fill;
				fill: mix(white, $slate, 80%);
			}
			&:nth-child(2) {
				transition: opacity 150ms ease-out, transform 0ms 150ms;
				will-change: transform, opacity;
				transform-origin: center center;
				transform: scale(0);
				fill: $blue;
			}
		}
	}
	input {
		&:hover {
			~ svg {
				circle:nth-child(1) {
					fill: mix(mix($slate, $grey, 20%), $blue, 80%);
				}
			}
		}
		&:active, &:checked {
			~ div {
				background: white;
			}
			~ svg {
				circle:nth-child(2) {
					transform: scale(1);
					transition: transform 150ms ease-out;
				}
			}
		}
	}
}

.html {
	position: relative;
	div {
		border-radius: 100%;
		&:nth-of-type(1) {
			transition: all 150ms ease-out;
			will-change: background;
			background: mix($slate, $grey, 20%);
			width: 24px;
			height: 24px;
		}
		&:nth-of-type(2), &:nth-of-type(3) {
			position: absolute;
			top: 4px;
			left: 4px;
			width: 16px;
			height: 16px;
		}
		&:nth-of-type(2) {
			transition: background 150ms ease-out;
			will-change: background;
			background: mix(white, $slate, 80%);
		}
		&:nth-of-type(3) {
			transition: opacity 150ms ease-out, transform 0ms 150ms;
			will-change: transform, opacity;
			transform-origin: center center;
			transform: scale(0);
			background: $blue;
		}
	}
	input {
		&:hover {
			~ div:nth-of-type(2) {
				background: mix(mix($slate, $grey, 20%), $blue, 80%);
			}
		}
		&:active, &:checked {
			~ div {
				&:nth-of-type(1) {
					background: white;
				}
				&:nth-of-type(3) {
					transition: transform 150ms ease-out;
					transform: scale(1);
				}
			}
		}
	}
}

External CSS

  1. https://fonts.googleapis.com/css?family=Libre+Franklin:100,200,300,400,500,600
  2. https://codepen.io/tutsplus/pen/598c614630b8b6882828b40d33bdbf3a

External JavaScript

This Pen doesn't use any external JavaScript resources.