YouTube AutoPlay Toggle Switch in HTML/CSS?

user_12252666 0
Viewed 124

Does anyone know how make a toggle switch like the YouTube AutoPlay one that has the "play" and "pause" icon on its on/off state on the knob?

enter image description here enter image description here

I have the following for a regular switch but not sure how to change the knob background dynamically?

.label {
  position: relative;
  width: 90px;
  height: 36px;
}

input {
  transform: scale(0);
}

.background {
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 20px;
  background: #6b6d6f;
  transition: background 0.4s;
}

.knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f7f7f7;
  transition: transform 0.4s;
}

input:checked + .background {
  background: blue;
}

input:checked + .background .knob {
  transform: translateX(52px);
}
<label class="label">
  <input type="checkbox" />
  <span class="background">
    <span class="knob"></span>
  </span>
</label>

sass switch-statement css html
2 Answers

look this

var play = document.getElementById('play');
var pause = document.getElementById('pause');
var hello= document.querySelector(".background");
var input = document.getElementById("toggle");
var n = 0;
// pause.style.display  ="none"
hello.addEventListener("click",()=>{
 if(n === 0){
pause.style.display  ="none";
play.style.display  ="block";
n = 1;
 }else{
     pause.style.display  ="block";
     play.style.display = "none";
     n = 0;
 }
})
.label {
  position: relative;
  width: 90px;
  height: 36px;
}

input {
  transform: scale(0);
}

.background {
  position: absolute;
  left: 30;
  height: 150%;
  width: 460%;
  /* margin-top: 500px; */
  border-radius: 20px;
  background: #6b6d6f;
  transition: background 0.4s;
}

.knob {
  position: absolute;
  top: -3px;
  left: 5px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f7f7f7;
  transition: transform 0.4s;
}

input:checked + .background {
  background: cadetblue;
}

input:checked + .background .knob {
  transform: translateX(52px);
}
<label class="label">
  <input id="toggle"  type="checkbox" onclick=""/>
  <span class="background">
    <!-- <span class="knob"></span> -->
<svg class="knob" id="play" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-play-circle" viewBox="0 0 16 16">
  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
  <path d="M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445z"/>
</svg>


<svg class="knob" id="pause" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pause-circle" viewBox="0 0 16 16">
  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
  <path d="M5 6.25a1.25 1.25 0 1 1 2.5 0v3.5a1.25 1.25 0 1 1-2.5 0v-3.5zm3.5 0a1.25 1.25 0 1 1 2.5 0v3.5a1.25 1.25 0 1 1-2.5 0v-3.5z"/>
</svg>


  </span>
</label>

user_161459310

Try this:

.label {
  position: relative;
  width: 2em;
  height: 1em;
  display: inline-block;
}

input {
  display: none;
}

.background {
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
  background: transparent;
  transition: background 0.4s;
}

.background:before
{
  content: "";
  height: 75%;
  width: 100%;
  background-color: #6b6d6f;
  position: absolute;
  top: 16%;
  border-radius: 1em;
  z-index: 0;
}
.knob {
  position: absolute;
  top: 0;
  left: 0.1em;
  width: 1em;
  height: 1em;
  background: #d7d7d7;
  transition: left 0.4s;
  display: flex;
  border-radius: 1em;
  border: 0.5px solid rgba(0, 0, 0, 0.1);
}

.knob:after
{
  content: "";
  display: block;
  margin: auto;
  box-sizing: border-box;
  height: 0.4em;
  width: 0.4em;
  border-color: transparent transparent transparent black;
  border-style: double;
  border-width: 0 0 0 0.4em;
}

input:checked + .background .knob {
  background: #f7f7f7;
}

input:checked + .background .knob:after {
  border-style: solid;
  border-width: 0.25em 0px 0.25em 0.4em;
}

input:checked + .background .knob {
  left: 0.75em;
}
<label class="label">
  <input type="checkbox" />
  <span class="background">
    <span class="knob"></span>
  </span>
</label>

user_29300380
Related