<form>
	<div class="radiobtn">
		<input type="radio" id="huey"
					 name="drone" value="huey" checked />
		<label for="huey">Huey</label>
	</div>

	<div class="radiobtn">
		<input type="radio" id="dewey"
					 name="drone" value="dewey" />
		<label for="dewey">Dewey</label>
	</div>

	<div class="radiobtn">
		<input type="radio" id="louie"
					 name="drone" value="louie" />
		<label for="louie">Louie</label>
	</div>

</form>
$accentcolor: #fcae2c;
$lightcolor: #fff;
$darkcolor: #444;

form {
	max-width: 250px;
	position: relative;
	margin: 50px auto 0;
	font-size: 15px;
}
.radiobtn {
	position: relative;
	display: block;
	label {
		display: block;
		background: lighten($accentcolor, 30%);
		color: $darkcolor;
		border-radius: 5px;
		padding: 10px 20px;
		border: 2px solid lighten($accentcolor, 20%);
		margin-bottom: 5px;
		cursor: pointer;
		&:after,
		&:before {
			content: "";
			position: absolute;
			right: 11px;
			top: 11px;
			width: 20px;
			height: 20px;
			border-radius: 3px;
			background: lighten($accentcolor, 15%);
		}
		&:before {
			background: transparent;
			transition: 0.1s width cubic-bezier(0.075, 0.82, 0.165, 1) 0s,
				0.3s height cubic-bezier(0.075, 0.82, 0.165, 2) 0.1s;
			z-index: 2;
			overflow: hidden;
			background-repeat: no-repeat;
			background-size: 13px;
			background-position: center;
			width: 0;
			height: 0;
			background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNS4zIDEzLjIiPiAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE0LjcuOGwtLjQtLjRhMS43IDEuNyAwIDAgMC0yLjMuMUw1LjIgOC4yIDMgNi40YTEuNyAxLjcgMCAwIDAtMi4zLjFMLjQgN2ExLjcgMS43IDAgMCAwIC4xIDIuM2wzLjggMy41YTEuNyAxLjcgMCAwIDAgMi40LS4xTDE1IDMuMWExLjcgMS43IDAgMCAwLS4yLTIuM3oiIGRhdGEtbmFtZT0iUGZhZCA0Ii8+PC9zdmc+);
		}
	}
	input[type="radio"] {
		display: none;
		position: absolute;
		width: 100%;
		appearance: none;
		&:checked + label {
			background: lighten($accentcolor, 15%);
			animation-name: blink;
			animation-duration: 1s;
			border-color: $accentcolor;
			&:after {
				background: $accentcolor;
			}
			&:before {
				width: 20px;
				height: 20px;
			}
		}
	}
}

@keyframes blink {
	0% {
		background-color: lighten($accentcolor, 15%);
	}
	10% {
		background-color: lighten($accentcolor, 15%);
	}
	11% {
		background-color: lighten($accentcolor, 20%);
	}
	29% {
		background-color: lighten($accentcolor, 20%);
	}
	30% {
		background-color: lighten($accentcolor, 15%);
	}
	50% {
		background-color: lighten($accentcolor, 20%);
	}
	45% {
		background-color: lighten($accentcolor, 15%);
	}
	50% {
		background-color: lighten($accentcolor, 20%);
	}
	100% {
		background-color: lighten($accentcolor, 15%);
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.