toggle button

**SioSio** · Oct 16 '20, 01:34 AM

html

Code:

<div class="switch">
	<div class="switch__title">OFF
		<label class="switch__label">
			<input type="checkbox" class="switch__input"/>
			<span class="switch__content"></span>
			<span class="switch__circle"></span>
		</label>
	</div>
</div>

css

Code:

.switch__title{
font-size: 14px;
}
.switch__label {
	width: 37px;
	position: relative;
	display: inline-block;
	padding-top: 3px;
}
.switch__content {
	display: block;
  cursor: pointer;
  position: relative;
  border-radius: 7px;
  height: 14px;
  background-color: rgba(34,31,31,.26);
  -webkit-transition: all .1s .4s;
	   -moz-transition: all .1s .4s;
	    -ms-transition: all .1s .4s;
	     -o-transition: all .1s .4s;
	        transition: all .1s .4s;
	overflow: hidden;
}
 
.switch__content:after {
	content: "";
	display: block;
	position: absolute;
	
	width: 0;
	height: 100%;
	top: 0;
	left: 0;
	
	border-radius: 7px;
	-webkit-transition: all .5s;
	   -moz-transition: all .5s;
	    -ms-transition: all .5s;
	     -o-transition: all .5s;
	        transition: all .5s;
}
.switch__input {
	display: none;
}
.switch__circle {
	display: block;
	top: 0px;
	left: 0px;
	position: absolute;
	width: 20px;
	height: 20px;
	-webkit-border-radius: 10px;
	        border-radius: 10px;
	background-color: #F1F1F1;
	-webkit-transition: all .5s;
	   -moz-transition: all .5s;
	    -ms-transition: all .5s;
	     -o-transition: all .5s;
	        transition: all .5s;
	-webkit-box-shadow: 0 2px 2px #ccc;
	        box-shadow: 0 2px 2px #ccc;
}
.switch__input:checked ~ .switch__circle {
	left: 18px;
	background-color: #009688;
}
.switch__input:checked ~ .switch__content {
 
	border-color: transparent;
	-webkit-transition: all 0s;
	   -moz-transition: all 0s;
	    -ms-transition: all 0s;
	     -o-transition: all 0s;
	        transition: all 0s;
}
 
.switch__input:checked ~ .switch__content:after {
	background-color: rgba(0,150,136,.5);
	width: 100%;
}

**AjayGohil** · Oct 23 '20, 03:35 AM

Hey,

Try Below code:

Code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
</style>
</head>
<body>

<h2>Toggle Switch</h2>

<label class="switch">
  <input type="checkbox" checked>
  <span class="slider round"></span>
</label>

</body>
</html>

Refer following site:

CSS Toggle Switches

https://freefrontend.com/css-toggle-switches/

Create CSS toggle switches with animations, accessibility support & mobile-friendly designs. Get ready-to-use code for settings and preferences.

**shrishsunder** · Jun 21 '21, 03:16 PM

Html

Code:

<div class="toggle">
  <input type="checkbox" class="check">
  <b class="b switch"></b>
  <b class="b track"></b>
</div>

CSS

Code:

<style>
* {
  margin: 0;
  padding: 0;
  position: relative;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

.b {
  display: block;
}

.toggle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 40px;
  border-radius: 100px;
  background-color: #ddd;
  margin: -20px -40px;
  overflow: hidden;
  box-shadow: inset 0 0 2px 1px rgba(0,0,0,.05);
}

.check {
  position: absolute;
  display: block;
  cursor: pointer;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 6;
}

  .check:checked ~ .track {
    box-shadow: inset 0 0 0 20px #4bd863;
  }

  .check:checked ~ .switch {
    right: 2px;
    left: 22px;
    transition: .35s cubic-bezier(0.785, 0.135, 0.150, 0.860);
    transition-property: left, right;
    transition-delay: .05s, 0s;
  }

.switch {
  position: absolute;
  left: 2px;
  top: 2px;
  bottom: 2px;
  right: 22px;
  background-color: #fff;
  border-radius: 36px;
  z-index: 1;
  transition: .35s cubic-bezier(0.785, 0.135, 0.150, 0.860);
  transition-property: left, right;
  transition-delay: 0s, .05s;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.track {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  transition: .35s cubic-bezier(0.785, 0.135, 0.150, 0.860);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.05);
  border-radius: 40px;
}
</style>

toggle button

toggle button

Comment

Comment

Comment