Custom Switch control

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

https://ru.pinterest.com/pin/524599056577600704/

Thumbnail
This awesome code was written by Bazalt, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Bazalt ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Custom Switch control</title>
  <script src="https://use.fontawesome.com/541282d1b9.js"></script>
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <form action="URL">
<input type="checkbox" id="id1">
<label class="switch" for="id1">
	<span class="switch__cross"> ✖ </span>
	<span class="switch__check"> ✔ </span>
	<div class="switch__slider"></div>
</label>
	
<input type="checkbox" id="id2">
<label class="switch" for="id2">
	<span class="switch__cross"> ✖ </span>
	<span class="switch__check"> ✔ </span>
	<div class="switch__slider"></div>
</label>
</form>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Bazalt/custom-switch-control-PGwaAZ */
form {
	width: 210px;
	height: 180px;
	margin: 100px auto;
	/*1em*/
	font-size: 16px;
}

/* Скрывает отображение стандартного инпута */
input {
	display: none;
}

/* Блок переключателя */
.switch {
	display: block;
	position: relative;
	width: 11.875em;
	height: 3.75em;
	margin: 3.125em;
	border-radius: 1.875em;
	background: linear-gradient(to bottom, #96d642 20%, #51ad23 80%);
	box-shadow: inset 0 0 0.5em 0.3em RGBA(0, 0, 0, 0.3),
		0 0 0.5em 0.1em RGBA(0, 0, 0, 0.2);
}

/* Тень блока переключателя в виде градиента*/
.switch::before {
	content: ""; 
	display: block;
	position: absolute;
	top:-0.5em;
	bottom: -0.5em;
	right: -0.5em;
	left: -0.5em;
	z-index: -1;
	border-radius: 2.375em;
	background: linear-gradient(to bottom, #c7c7c7, #fcfcfc );
}

/* Крестик, галочка */
.switch__cross,
.switch__check {
	position: absolute;
	top: 0.15em;
	font-size: 2.2em;
	font-weight: 900;
	color: #ffffff;
}

.switch__cross {
	left: 0.75em;
}

.switch__check {
	right: 0.75em;
}

/* Ползунок */
.switch__slider {
	position: relative;
	width: 7.5em;
	height: 3.75em;
	border-radius: 1.875em;
	background: linear-gradient(30deg, #d9d9d9 20%, #fcfcfc);
	box-shadow: 0 0.5em 1em 0 RGBA(0, 0, 0, 0.4);
}

/* Кружок внутри ползунка */
.switch__slider::after {
	content: "";
	display: block;
	width: 2.5em;
	height: 2.5em;
	position: relative;
	top: 0.625em;
	left: 4.375em;
	border-radius: 50%;
	background: linear-gradient(to bottom, #d9d9d9 20%, #fcfcfc);
}

/* Задает параметры переключателя при активированном инпуте */
input:checked + .switch {
	background: linear-gradient(to bottom, #d14141 20%, #db2323);
}

/* Параметры слайдера внутри переключателя при активированном инпуте */
input:checked + .switch .switch__slider {
	transform: translateX(4.375em);
	background: linear-gradient(-30deg, #d9d9d9 20%, #fcfcfc);
}

Comments