Sliding Radio Button with Emojis

Written by @kerixa 11 March 2021

Forms used in the websites usually use radio buttons, which allows the user to choose one of several options. In the following code, we have a sliding radio button that uses emojis instead of a simple circular radio button. This emoji and the color of the radio button change when it is selected.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
:root {
	--dark-switch-shadow: #fce477;
	--dark-switch-icon: "😴";
	--light-switch-shadow: #fce477;
	--light-switch-icon: "🙂";
	/* Default */
	--switch-icon: var(--dark-switch-icon);
	--switch-shadow-color: var(--dark-switch-shadow);
}

body {
	background: black;
}

.theme-switch {
	display: none;
}

.label {
	position: relative;
	display: flex;
	align-items: center;
}

.switch-label {
	width: 2.2rem;
	height: 1rem;
	font-size: 1rem;
	display: flex;
	align-items: center;
}

.switch-label::before,
.switch-label::after {
	content: "";
	display: block;
	position: absolute;
	cursor: pointer;
}

.switch-label::before {
	width: 2.2rem;
	height: 1rem;
	background-color: #fff;
	border-radius: 100rem;
	-webkit-transition: background-color 0.25s ease;
	transition: background-color 0.25s ease;
}

.switch-label::after {
	left: -0.25rem;
	content: var(--switch-icon);
	font-size: 1.5rem;
	animation: blink-shadow 2s linear infinite;
	-webkit-transition: left 0.25s ease;
	transition: left 0.25s ease;
}

.theme-switch:checked~#page .switch-label::before {
	background: green;
}

.theme-switch:checked~#page .switch-label::after {
	left: 1rem;
}

@keyframes blink-shadow {
	0% {
		text-shadow: 0 0 0rem var(--switch-shadow-color);
	}
	50% {
		text-shadow: 0 0 1rem var(--switch-shadow-color);
	}
	100% {
		text-shadow: 0 0 0rem var(--switch-shadow-color);
	}
}

.theme-switch:checked~#page {
	--switch-shadow-color: var(--light-switch-shadow);
	--switch-icon: var(--light-switch-icon);
}
</style>
<input type="checkbox" class="theme-switch" id="theme-switch">

<div id="page">
  <div class="label">
    <label for="theme-switch" class="switch-label"></label>
  </div>
</div>
<a target='_blank' href='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300