<div class="hvcenter">
 <div class="emoji-toggle emoji-food ">
  <input type="checkbox" id="toggle3" class="toggle" />
  <div class="emoji"></div>
  <label for="toggle3" class="well"></label>
 </div>
</div>













<!-- Follow me on Twitter -->
<a class="twitter" target="_top" href="https://twitter.com/MrAhmadAwais"><svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"></path></svg></a>

// Base class
.emoji-toggle {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 5rem;
	color: #bbb;
	text-transform: uppercase;
	position: relative;
	width: 350px;
	margin: 0 auto;
	.well {
		display: block;
		background: coral;
		height: 100px;
		width: 100%;
		border-radius: 10px;
		cursor: pointer;
	}
	.toggle {
		opacity: 0;
		border: 0;
		outline: none;
		height: 100%;
		width: 100%;
		background: transparent;
		position: absolute;
		cursor: pointer;
		z-index: 100;
		~ .emoji:before {
			content: "\01F431";
			position: absolute;
			left: 0;
			top: -30px;
			font-size: 40px;
			transition: 0.2s;
		}
		&:checked {
			~ .emoji:before {
				left: 100%;
				margin-left: -1em;
			}
		}
		~ label {
			white-space: nowrap;
			&:before {
				position: absolute;
				right: 100%;
				margin-right: 5px;
				top: 0;
			}
			&:after {
				position: absolute;
				left: 100%;
				margin-left: 5px;
				top: 0;
			}
		}
	}
}

@mixin emojiType($leftEmoji, $rightEmoji, $leftLabel, $rightLabel) {
	.toggle {
		~ .emoji:before {
			font-size: 10rem;
			content: $leftEmoji;
		}
		&:checked {
			~ .emoji:before {
				font-size: 10rem;
				content: $rightEmoji;
			}
		}
		~ label {
			&:before {
				content: $leftLabel;
			}
			&:after {
				content: $rightLabel;
			}
		}
	}
}

.emoji-food {
	@include emojiType("\01F354", "\01F355", "Burger", "Pizza");
}

// Optional demo related CSS.
// System font stack.
body {
	background: linen;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans,
		Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Horizontal + Vertical Centering of all the children nodes.*/
.hvcenter {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}




// [IGNORE] DEMO CSS BELOW.
body {
	min-height: 100vh;
	display: flex;
	font-family: "Inter", Arial;
	justify-content: center;
	align-items: center;
	background: #181820;
	.twitter {
		position: fixed;
		display: block;
		right: 12px;
		bottom: 12px;
		svg {
			width: 32px;
			height: 32px;
			fill: #1da1f2;
		}
	}
}