Hey Guys i wanna know how to make a toggle slide switch button in javascript i have a project of calculator app and i have three themes in it 1 is default theme that i have already set in the css and 2 and 3 i set with javascript three buttons are together and working fine i just wanna make them 3 in 1 slide toggle switch but without any text inside of it and they will move a lil bit forward if i click on to 2 theme or 3 theme or backward like 2 theme or 1 theme and i want them to look like this here's the image themes:
Here is the HTML code:
<!doctype html>
<html>
<body>
<div>
<button onclick="theme1()">1</button>
<button onclick="theme2()">2</button>
<button onclick="theme3()">3</button>
</div>
</body>
</html>You guys just please help me make this button beautiful like in the images and working sliding button and switching one theme to another
Have a nice day everyone and Happy Coding!
12 Answers
Is that works for you?
.switch-toggle { float: left; background: black; border-radius: 2px; width: 90px;
}
.switch-toggle input { position: absolute; opacity: 0; width: 30%;
}
.switch-toggle input + label { padding: 10px; float:left; color: black; cursor: pointer;
}
.switch-toggle input:checked + label { background: red; border-radius: 50%;
}
.numberDiv { width: 90px; display: flex; padding-left: 10px; } .numberDiv p { width: 30%; }<div class='numberDiv'> <p>1</p> <p>2</p> <p>3</p>
</div>
<div> <input name="state-d" type="radio" checked="" /> <label for="on" onclick="">1</label> <input name="state-d" type="radio" /> <label for="off"onclick="">2</label> <input name="state-d" type="radio" checked="checked" /> <label for="na" onclick="">3</label>
</div> let toggleSwitch = document.getElementsByClassName('redButton')[0] function go_to_1() { toggleSwitch.classList.add('horizTranslate1'); toggleSwitch.classList.remove('horizTranslate2'); toggleSwitch.classList.remove('horizTranslate3'); document.getElementById("outerContainer").style.backgroundColor = "#4A5B7E" document.getElementById("buttonContainer").style.backgroundColor = "#222D41" document.getElementById("legendTextContainer").style.color = "#ffffff" doStuff(1) } function go_to_2() { toggleSwitch.classList.add('horizTranslate2'); toggleSwitch.classList.remove('horizTranslate3'); toggleSwitch.classList.remove('horizTranslate1'); document.getElementById("outerContainer").style.backgroundColor = "#E5E5E5" document.getElementById("buttonContainer").style.backgroundColor = "#D3CCCA" document.getElementById("legendTextContainer").style.color = "#222222" doStuff(2) } function go_to_3() { toggleSwitch.classList.add('horizTranslate3'); toggleSwitch.classList.remove('horizTranslate2'); toggleSwitch.classList.remove('horizTranslate1'); document.getElementById("outerContainer").style.backgroundColor = "#000000" document.getElementById("buttonContainer").style.backgroundColor = "#444444" document.getElementById("legendTextContainer").style.color = "#E2D241" doStuff(3) } function doStuff(n) { document.getElementById("message").innerHTML = "Switch is in position " + n //your code here... }.redButton.horizTranslate2 { -webkit-transition: -webkit-transform 0.1s linear; -webkit-transform: translateX(20px);}
.redButton.horizTranslate3 { -webkit-transition: -webkit-transform 0.1s linear; -webkit-transform: translateX(40px);}
.redButton.horizTranslate1 { -webkit-transition: -webkit-transform 0.1s linear; -webkit-transform: translateX(0px);}
#outerContainer{position:relative; width:111px; height:98px; background-color:#4A5B7E;}
#buttonContainer{background-color: #222D41; width:71px; height:28px; position:relative; left:20px; top:45px; border-radius:14px;}
.redButton{width:16px; height:16px; background-color:#DB3D2B; border-radius:8px; position:relative; top:6px; left:6px;}
#legendTextContainer{left:22px; display:inline-block;position:absolute; top:23px; color:#ffffff;font-family:Arial; font-size:10pt;text-align:center;}
.legendText{display:inline-block;width:20px; padding-bottom:33px; cursor:default; user-select: none;}
#message{border:1px solid #cccccc; display:inline-block; padding:4px; margin-top: 6px; font-family:Arial; font-size:10pt;} <div> <div> <div></div> </div> <div> <div onclick="go_to_1()">1</div><div onclick="go_to_2()">2</div><div onclick="go_to_3()">3</div> </div> </div> <div>Switch is in position 1</div>
