ساخت دکمه سوئیچ یا Toggle Button در جاوا اسکریپت

منتشر شده در تاریخ : 15, مرداد, 1401

در این آموزش ویدیویی از سری آموزش‌های مینی پروژه جاوا اسکریپت و مینی پروژه های 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 و جاوا اسکریپت را یاد گرفته باشید، اگر سوالی در رابطه با این آموزش دارید در انتهای همین جلسه و در بخش کامنت ها با ما در ارتباط باشید.

3/5 - (2 امتیاز)

آموزش طراحی فرم لاگین با HTML و CSS

اسلایدر کارت وبلاگ متحرک با HTML و CSS

آموزش ساخت ساعت دیجیتال در جاوا اسکریپت

نمایش و پنهان کردن رمز عبور در جاوا اسکریپت

ساخت منوی بازشو در HTML CSS و جاوا اسکریپت

مینی وب اپلیکیشن پسورد ساز با جاوا اسکریپت