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.
A Pen by Psychi-Enkavma on CodePen.
| <form> | |
| <input class="ch" type="checkbox" name="temperature" value="is_hot"> | |
| </form> |
| *, *: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: inset 5px rgba(0,0,0,0.3); | |
| border-radius: 0.2em; | |
| box-shadow: 0 0.0em 0 0.00em 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; | |
| margin-top: 0.090em; | |
| 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; | |
| 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: 92.5% 0; | |
| box-shadow: 0px 0px 0px 0px 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; | |
| } |