سلام توی این مطلب قصد دارم روش ساخت دکمه ی مد شب رو به شما آموزش بدم .
.
<html>
<head id="head_codes">
<style>
* {
margin: 0;
padding: 0;
}
#checkInput {
display: none;
}
#Label_night {
width: 100px;
height: 50px;
background: #1E1E1E;
border-radius: 60px;
display: block;
margin: 30px auto;
position: relative;
transition: all .4s;
}
#Label_night::after {
content: "";
width: 40px;
height: 40px;
border-radius: 60px;
margin: 5px;
display: block;
background: #CECECE;
position: absolute;
transition: all .4s;
}
#checkInput:checked + #Label_night{
background-color: #CECECE;
}
#checkInput:checked + #Label_night::after {
margin-left: 55px;
background: #1E1E1E;
}
</style>
</head>
<body id="by_bg">
<input type="checkbox" id="checkInput" onclick="modeNight()">
<label for="checkInput" id="Label_night"></label>
</body>
<script>
var by_se = document.getElementById('by_bg');
function modeNight() {
var checkbox = document.getElementById('checkInput');
if (checkbox.checked == true)
{
by_se.style.background = "#1E1E1E";
}
else {
by_se.style.background = "#fff";
}
}
</script>
</html>
در کد بالا ما یک چک باکس گداشتیم که اگر دکمه چک شد بیاد با جاوا اسکریپت و پس زمینه رو تغییر بده اگر چک نشد پس زمینه رو سفید کنه.
عالی بود :)
ولی از کدش هاش هیچی نفهمیدم :/
اینو تو قالبتون بزارید کار نمیکنه، اینو تو فایل HTML بذارید