مدرس دوره

نبی عبدی

زمان ویدیو

12:57 دقیقه

برو به دیگر جلسات

آموزش HTML و CSS

برای دانلود ویدیو

وارد شوید

ساخت دکمه سوئیچ یا 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 امتیاز)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

فروش ویژه نوروز... تا 85 درصد تخفیف روی تمامی دوره‌ها...تخفیف‌تو بگیر!
+
آموزش‌های ویدیویی جدید فقط در یوتیوب