Cold-Hot Toggle Switch

FEATURED

In this example below you will see how to do a Cold-Hot Toggle Switch with some HTML / CSS and Javascript

Probably a toggle switch concept that no one has tried before. This one is for temperature—options being cold or hot. The idea is to portray the handle as an ice cube for cold and a flame for hot. For hot, the cube moves right and melts at the same time, and a rising flame moves along with it. For cold again, the water forms back into a cube while moving left, and the flame dies while moving with it.

Thumbnail
This awesome code was written by Jon Kantner, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Jon Kantner ©
  • HTML
  • CSS
  • JavaScript
    <form>
	<input class="ch" type="checkbox" name="temperature" value="is_hot">
</form>

/*Downloaded from https://www.codeseek.co/jkantner/cold-hot-toggle-switch-XYNONw */
    *, *:before, *:after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	font-size: calc(16px + (24 - 16) * (100vw - 320px)/(1600 - 320));
}
body {
	background: rgb(235,167,49);
	line-height: 1.5;
}
input {
	display: inline-block;
}
form {
	padding: 3em 1.5em 0 1.5em;
	text-align: center;	
}
.ch, .ch:before, .ch:after {
	transition: all 0.3s ease-in-out;
}
.ch {
	background-color: rgb(27,123,145);
	border-radius: 0.2em;
	box-shadow: 0 0.05em 0 0.05em rgba(0,0,0,0.3) inset;
	font-size: 4em;
	overflow: hidden;
	position: relative;
	width: 3em;
	height: 1.5em;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	z-index: 0;
}
.ch:before, .ch:after {
	content: "";
	display: block;
	position: absolute;
}
.ch:before {
	background-color: currentColor;
	border-radius: 0.125em;
	box-shadow:
		0 0 0 0.05em inset,
		-0.12em -0.12em 0 rgb(109,148,184) inset,
		-0.4em -0.3em 0 0.05em inset,
		0.12em 0.12em 0 rgb(255,255,255) inset;
	color: rgb(149,188,224);
	opacity: 0.9;
	bottom: 0;
	left: 0.125em;
	width: 1.25em;
	height: 1.25em;
	z-index: 2;
}
.ch:after {
	background-image:
		/* white */
		radial-gradient(0.2em 0.5em at 38% 95%, rgb(255,255,255) 49%, rgba(255,255,255,0) 50%),
		radial-gradient(0.3em 0.8em at 52% 95%, rgb(255,255,255) 49%, rgba(255,255,255,0) 50%),
		radial-gradient(0.25em 0.4em at 67% 95%, rgb(255,255,255) 49%, rgba(255,255,255,0) 50%),
		/* yellow */
		radial-gradient(0.25em 0.7em at 36% 95%, rgb(255,224,0) 49%, rgba(255,224,0,0) 50%),
		radial-gradient(0.4em 1.2em at 52% 95%, rgb(255,224,0) 49%, rgba(255,224,0,0) 50%),
		radial-gradient(0.25em 0.6em at 70% 93%, rgb(255,224,0) 49%, rgba(255,224,0,0) 50%),
		/* orange */
		radial-gradient(0.3em 0.8em at 32% 81%, rgb(255,144,0) 49%, rgba(255,144,0,0) 50%),
		radial-gradient(0.5em 1.6em at 52% 95%, rgb(255,144,0) 49%, rgba(255,144,0,0) 50%),
		radial-gradient(0.3em 0.9em at 74% 86%, rgb(255,144,0) 49%, rgba(255,144,0,0) 50%),
		/* red-orange */
		radial-gradient(0.4em 1em at 25% 70%, rgb(255,76,0) 49%, rgba(255,76,0,0) 50%),
		radial-gradient(0.7em 2.75em at 52% 100%, rgb(255,76,0) 49%, rgba(255,76,0,0) 50%),
		radial-gradient(0.4em 1.2em at 79% 75%, rgb(255,76,0) 49%, rgba(255,76,0,0) 50%);

	background-position: 100% 1.5em;
	background-size: 1.5em 1.5em;
	background-repeat: no-repeat;
	border-radius: 0 0 0 0.1em / 0 0 0 0;
	box-shadow: 0 0 0 0 rgb(169,208,244) inset;
	bottom: 0;
	left: 0;
	width: 1.5em;
	height: 1.5em;
	z-index: 1;
}
/* Checked */
.ch:checked {
	background-color: rgb(92,8,8);
}
.ch:checked:before {
	border-radius: 50%;
	transform: translate(1.5em,1.5em) rotate(45deg) scale(0.5);
}
.ch:checked:after {
	background-position: 100% 0;
	box-shadow: 0 -0.15em 0 0 rgb(169,208,244) inset;
	width: 3em;
}

/* Other States */
.ch:focus {
	/* Usually an anti-A11Y practice but set to remove an annoyance just for this demo */
	outline: 0;
}


/*Downloaded from https://www.codeseek.co/jkantner/cold-hot-toggle-switch-XYNONw */
    

Comments