<input type="radio" id="fat" name="fatfit">
<input type="radio" id="fit" name="fatfit">
<div>
	GET F<span>A<span>A</span><span>I</span></span>T
</div>
<div>
	<label for="fat">🍕</label>
	<label for="fit">💪🏼</label>
</div>
$spinTime: 3;
html, body { height: 100%; }
* { user-select: none; }
body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-family: 'Raleway', sans-serif;
	font-size: 72px;
	input {
		display: none;
		+ div > span {
			display: inline-block;
			position: relative;
			white-space: nowrap;
			color: rgba(#fff, 0);
			transition: all 0.5s ease-in-out;
			span {
				display: inline-block;
				position: absolute;
				left: 50%;
				text-align: center;
				color: rgba(#000, 1);
				transform: translateX(-50%);
				transform-origin: left;
				transition: all 0.5s ease-in-out;
				&:first-of-type {
					transform: rotateY(0deg) translateX(-50%);
				}
				&:last-of-type {
					transform: rotateY(0deg) translateX(0%) scaleX(0.75) skew(23deg,0deg);
				}
			}
		}
		&#fat:checked ~ div > span span {
			&:first-of-type {
				transform: rotateY(0deg) translateX(-50%);
			}
			&:last-of-type {
				transform: rotateY(0deg) translateX(0%) scaleX(0.75) skew(23deg,0deg);
			}
		}
		&#fit:checked ~ div > span {
			margin: 0 -10px;
			span {
				&:first-of-type {
					transform: rotateY(90deg) translateX(-50%);
				}
				&:last-of-type {
					transform: rotateY(0deg) translateX(-50%) scaleX(1) skew(0deg,0deg);
				}
			}
		}
		+ div + div {
			width: 280px;
			margin-top: 10px;
			label {
				display: block;
				padding: 20px 10px;
				text-align: center;
				transition: all 0.15s ease-in-out;
				background: #fff;
				border-radius: 10px;
				box-sizing: border-box;
				width: 48%;
				font-size: 64px;
				cursor: pointer;
				&:first-child {
					float: left;
					box-shadow:
						inset 0 0 0 4px #1597ff,
						0 15px 15px -10px rgba(darken(#1597ff, 10%), 0.375);
				}
				&:last-child { float: right; }
			}
		}
		&#fat:checked ~ div + div label {
			&:first-child {
				box-shadow:
					inset 0 0 0 4px #1597ff,
					0 15px 15px -10px rgba(darken(#1597ff, 10%), 0.375);
			}
			&:last-child {
				box-shadow:
					inset 0 0 0 0px #1597ff,
					0 10px 15px -20px rgba(#1597ff, 0);
			}
		}
		&#fit:checked ~ div + div label {
			&:first-child {
				box-shadow:
					inset 0 0 0 0px #1597ff,
					0 10px 15px -20px rgba(#1597ff, 0);
			}
			&:last-child {
				box-shadow:
					inset 0 0 0 4px #1597ff,
					0 15px 15px -10px rgba(darken(#1597ff, 10%), 0.375);
			}
		}
	}
}
View Compiled

External CSS

  1. https://fonts.googleapis.com/css?family=Raleway:900

External JavaScript

This Pen doesn't use any external JavaScript resources.