هیچ محصولی در سبد خرید نیست.
مدرس دوره
نبی عبدی
زمان ویدیو
12:57 دقیقه
برو به دیگر جلسات
برای دانلود ویدیو
ساخت دکمه سوئیچ یا Toggle Button در جاوا اسکریپت
در این آموزش ویدیویی از سری آموزش‌های مینی پروژه جاوا اسکریپت و مینی پروژه های HTML و CSS می خواهیم یک دکمه سوئیچ یا Toggle Button توسط زبان برنامه نویسی جاوا اسکریپت و البته HTML و CSS طراحی کنیم که از این طرح می‌توانید در پروژه های خود به سادگی استفاده کنید، پس با این آموزش جذاب همراه آکادمی وبکیما باشید.
کدهای HTML پروژه
در زیر می‌توانید کدهای html مربوط به مینی پروژه دکمه سوئیچ یا Toggle Button در جاوا اسکریپت را مشاهده کنید.
<!DOCTYPE html>
<!-- Coding by Naviid dev -->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Naviid dev - Toggle Button Animation</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<input type="checkbox" class="toggle" />
<script src="script.js"></script>
</body>
</html>کدهای CSS پروژه
در زیر می‌توانید کدهای CSS مربوط به مینی پروژه دکمه سوئیچ یا Toggle Button در جاوا اسکریپت را مشاهده کنید.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #283593;
min-height: 100vh;
display: grid;
place-items: center;
}
.toggle {
position: relative;
height: 12px;
width: 125px;
cursor: pointer;
border-radius: 25px;
background-color: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
appearance: none;
}
.toggle::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
height: 50px;
width: 50px;
background-color: #3f51b5;
border-radius: 50%;
border: 10px solid #fff;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.toggle.active::before {
left: calc(100% - 70px);
background-color: #fff;
border-color: #3f51b5;
}کدهای جاوا اسکریپت پروژه
در زیر می‌توانید کدهای جاوا اسکریپت مربوط به مینی پروژه دکمه سوئیچ یا Toggle Button در جاوا اسکریپت را مشاهده کنید.
const toggleBtn = document.querySelector(".toggle");
toggleBtn.addEventListener("click", () => toggleBtn.classList.toggle("active"));جمع بندی
در انتها امیدواریم که آموزش ساخت مینی پروژه دکمه سوئیچ یا Toggle Button در HTML CSS و جاوا اسکریپت را یاد گرفته باشید، اگر سوالی در رابطه با این آموزش دارید در انتهای همین جلسه و در بخش کامنت ها با ما در ارتباط باشید.