Theme Toggle button
Making theme toggle button
In this tutorial we make Theme toggle button which work as switch between black and dark mode.
Theme Toggle Tutorial steps
00 Demo to theme toggle button
01 open VS code
02 create file index.html, style.css
03 code in html file to create the basic structure of theme toggle button
04 code in CSS file to style the toggle button
05 finally we create theme toggle button
.png)
Source code
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h2>Theme Toggle / Collapse</h2>
<div class="r">
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
<label class="switch">
<input type="checkbox" checked>
<span class="slider"></span>
</label><br>
</div>
<br>
<div class="r">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
</div>
</div>
</body>
</html>
style.css
body {
font-family: sans-serif;
}
h2 {
font-size: 22px;
padding: 10px;
}
.container {
padding: 10px;
margin: 20px;
box-shadow: 0 0 20px 0 #000;
text-align: center;
border: 2px solid rgb(5, 112, 59);
width: 50%;
}
.container .r {
box-shadow: 0 0 20px 0 rgb(37, 37, 37);
border: 1px solid #881515;
border-radius: 10px;
padding: 4px;
margin: 4px;
}
.container .r label {
margin: 0 30px;
}
.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%;
}
Comments
Post a Comment