toggle

In this example below you will see how to do a toggle with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by NCollen, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright NCollen ©
  • HTML
  • CSS
  • JavaScript
    <div class = 'contain'>
	<input  name = 't' class = 'toggle toggle-basic' id = 'toggle-1' type = 'radio'>
	<label for = 'toggle-1'></label>
	<input name = 't' class = 'toggle toggle-yn' id = 'toggle-2' type = 'radio'>
	<label data-on = 'ON' data-off = 'OFF' for = 'toggle-2'></label>
	<input name = 't' class = 'toggle toggle-own' id = 'toggle-3' type = 'radio'>
	<label for = 'toggle-3'></label>
	<input name = 't' class = 'toggle toggle-own' id = 'toggle-4' type = 'radio'>
	<label for = 'toggle-4'></label>
</div>

<div class = 'slidetest'>
	<input name = 's' type = 'radio' class = 'slide' id = 'slide-1' checked/>
	<input name = 's' type = 'radio' class = 'slide' id = 'slide-2'/>
	<input name = 's' type = 'radio' class = 'slide' id = 'slide-3'/>
	<label for = 'slide-1'>Option 1</label>
	<label for = 'slide-2'>Option 2</label>
	<label for = 'slide-3'>Option 3</label>
	<div class = 'slider-bar'><div class = 'tail'></div></div>
</div>

<div class = 'circletest'>
	<div class = 'circle-fill'></div>
	<div class = 'circle-fill'></div>
	<div class = 'circle-fill'></div>
	<div class = 'circle-fill'></div>
	<div class = 'circle-fill'></div>
	<div class = 'circle-fill'></div>
	<label for = 'c-t-1'>Option 1</label>
	<label for = 'c-t-2'>Option 2</label>
	<label for = 'c-t-3'>Option 3</label>
	<label for = 'c-b-1'>Option 1</label>
	<label for = 'c-b-2'>Option 2</label>
	<label for = 'c-b-3'>Option 3</label>
	<input name = 'c-t' type = 'radio' class = 'circle' id = 'c-t-1' checked/>
	<input name = 'c-t' type = 'radio' class = 'circle' id = 'c-t-2'/>
	<input name = 'c-t' type = 'radio' class = 'circle' id = 'c-t-3'/>
	<input name = 'c-b' type = 'radio' class = 'circle' id = 'c-b-1' checked/>
	<input name = 'c-b' type = 'radio' class = 'circle' id = 'c-b-2'/>
	<input name = 'c-b' type = 'radio' class = 'circle' id = 'c-b-3'/>
	<div class = 'circle-top circle-option'></div>
	<div class = 'circle-option circle-bottom'></div>
</div>

/*Downloaded from https://www.codeseek.co/NCollen/toggle-LNawwW */
    //mixins for parameter based styles
//@mixin stuff($param){
//	background-image: url(#{$param}.jpg)
//}
//body{
//@include stuff(raptors);
//}
//extends for repetition of style/browser compatability
//.top{
//top: 0
//}
//.hill{
//@extend .top;
//}
//scss variables as lists, and maps

.toggle{
	position: absolute;
	margin-left: -9999px;
	display:none;
}
.toggle + label{
	display: block;
	position:relative;
	cursor: pointer;
	outline: none;
	user-select: none;
	-webkit-user-select:none;
}

//basic toggle with drop shadow on button----------
input.toggle-basic + label{
	padding: 2px;
	width: 120px;
	height: 60px;
	background-color: #ddd;
	border-radius: 60px;
	&:before,
	&:after{
		display:block;
		position:absolute;
		top: 1px;
		left: 1px;
		bottom: 1px;
		content: '';
	}
	&:before{
		right: 1px;
		background-color: #eee;
		border-radius: 60px;
		transition: background .4s;
	}
	&:after{
		width: 58px;
		background-color: #fff;
		border-radius: 100%;
		box-shadow: 0 2px 5px rgba(0,0,0,0.3);
		transition: margin .4s;
	}
}
input.toggle-basic:checked + label{
	&:before{background-color: #8d8;}
	&:after{margin-left: 60px;}
}
//end basic toggle---------------------------------

//flip toggle with words on both sides-------------
input.toggle-yn +label{
	height: 60px;
	padding: 2px;
	width: 120px;
}
input.toggle-yn + label:before,
input.toggle-yn + label:after{
	display:block;
	position:absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	color: #fff;
	font-family: 'roboto slab', serif;
	font-size: 30px;
	text-align: center;
	text-shadow: 0px 0 2px rgb(0,0,0),0px 0 5px #fff;;
	line-height: 60px;
}
input.toggle-yn + label:before{
	background-color: #ddd;
	content: attr(data-off);
	transition: transform .5s;
	backface-visibility: hidden;
}
input.toggle-yn + label:after{
	background-color: #8d8;
	content: attr(data-on);
	transition: transform .5s;
	transform: rotateY(180deg);
	backface-visibility: hidden;
}
input.toggle-yn:checked + label:before{
	transform: rotateY(180deg);
}
input.toggle-yn:checked + label:after{
	transform: rotateY(0deg);
}
//end flip toggle----------------------------------

//toggle with border-------------------------------
input.toggle-own + label{
	width: 120px;
	height: 60px;
	padding: 2px;
	background-color: #fff;
	border-radius: 10px;
	border: solid 5px #c88;
	//box-shadow: 2px 2px 2px rgba(0,0,0,0.5) inset, 2px 2px 2px rgba(0,0,0,0.5);
}
input.toggle-own +label:before,
input.toggle-own +label:after{
	display: block;
	position: absolute;
	top: 5px;
	left: 5px;
	right: 5px;
	bottom: 5px;
	content: '';
}
input.toggle-own +label:before{
	background-color: #888;
	border-radius: 10px;
	transition: background .4s ease;
}
input.toggle-own +label:after{
	width: 50px;
	background-color: #c88;
	border-radius: 10px;
	//box-shadow: -2px -2px 2px rgba(0,0,0,0.5) inset;
	transition: margin .4s ease;
}
input.toggle-own:checked + label:before{
	background-color: #ccc;
}
input.toggle-own:checked + label:after{
	margin-left: 50px;
	background-color: #8c8;
}
input.toggle-own:checked + label{
	border-color: #8c8;
}
//end toggle with border---------------------------

//radio box slider---------------------------------
.slide{
	display: none;
}
.slidetest{
	position: relative;
	background-color: #def;
	border-radius: 3vmin;
	width: 38vmin;
	label{
		position: relative;
		cursor: pointer;
		width: 10vmin;
		margin: 1vmin;
		padding: .5vmin;
		font-size: 2vmin;
		border-radius: 3vmin;
	}
}
.slider-bar{
	position: absolute;
	top: 1vmin;
	width: 10vmin;
	height: 4vmin;
	border-radius: 3vmin;
	background-color: #def;
	opacity: .6;
	transition: all .4s ease;
}
.tail{
	position: absolute;
	top: .5vmin;
	left: -2vmin;
	width: 3vmin;
	height: 3vmin;
	border-style: solid;
	border-radius: 50% 20% 50% 20%;
	border-width:.5vmin 0;
}
#slide-1:checked ~ .slider-bar{
	background-color: #feb;
	left: 1vmin;
	.tail{
		border-color: #feb;
	}
}
#slide-2:checked ~ .slider-bar{
	background-color: #8eb;
	left: 13vmin;
	.tail{
		border-color: #8eb;
	}
}
#slide-3:checked ~ .slider-bar{
	background-color: #95c;
	left: 26vmin;
	.tail{
		border-color: #95c;
	}
}
//end radio box slider-----------------------------

//radio circle-------------------------------------
$dist: 15vw;
.circle{
	display: none;
}
.circletest{
	position: relative;
	height: 40vw;
	width: 40vw;
	margin: 5vw;
	border-radius: 50%;
	border:{
		style: solid;
		width: 1px 0 1px 0;
	}
}
.circletest label{
	position: absolute;
	top: $dist;
	left: $dist;
	height: 10vw;
	width: 10vw;
	background-color: #8aa;
	border-radius: 50%;
	cursor: pointer;
	text-align: center;
	padding-top: 3.5vw;
	font-size: 2vw;
	user-select: none;
	-webkit-user-select: none;
}
.circle-option{
	position: absolute;
	top: $dist+1;
	left: $dist+1;
	height: 8vw;
	width: 8vw;
	border-radius: 50%;
	opacity: .6;
	transition: all .4s ease;
}
.circle-top{
	background-color: #6eb;
}
.circle-fill{
	position: absolute;
	top: $dist+1;
	left: $dist+1;
	height: 8vw;
	width: 8vw;
	background-color: #def;
	border-radius: 50%;
}
#c-t-1:checked ~ .circle-top{
	background-color: #feb;
	transform: rotate(30deg) translate($dist) rotate(-30deg);
}
#c-t-2:checked ~ .circle-top{
	background-color: #8eb;
	transform: rotate(90deg) translate($dist) rotate(-90deg);
}
#c-t-3:checked ~ .circle-top{
	background-color: #95c;
	transform: rotate(150deg) translate($dist) rotate(-150deg);
}
#c-b-1:checked ~ .circle-bottom{
	background-color: #feb;
	transform: rotate(210deg) translate($dist) rotate(-210deg);
}
#c-b-2:checked ~ .circle-bottom{
	background-color: #8eb;
	transform: rotate(270deg) translate($dist) rotate(-270deg);
}
#c-b-3:checked ~ .circle-bottom{
	background-color: #95c;
	transform: rotate(330deg) translate($dist) rotate(-330deg);
}
@for $i from 7 through 12{
	.circletest label:nth-child(#{$i}){
		transform: rotate(-30deg + (60 * $i)) translate($dist) rotate(-(-30deg + (60 * $i)));
	}
}
@for $i from 1 through 6{
	.circle-fill:nth-child(#{$i}){
		transform: rotate(0deg + (60 * $i)) translate($dist) rotate(-(0deg + (60 * $i)));
	}
}
//end radio circle---------------------------------



/*Downloaded from https://www.codeseek.co/NCollen/toggle-LNawwW */
    /*-------------------------------------------------*\
| 										Toggle
|	Made by Ncollen
|	
|	User stories:
|	--the toggle replaces the design of a default checkbox or radio button
|							
|	Uses:	
|		jquery, scss, and bootstrap
|		
| Most trouble encountered around:
| --
|	
|	To be added:
| --
\*_________________________________________________*/

Comments