Эта статья была первоначально опубликована на
https://notarena.com/

Этот код создает анимированную кнопку-переключатель, которая переключается между светлым и темным режимом путем добавления или удаления «темного» класса в элементе body. Кнопка переключения имеет кружок, который плавно переходит в режим, а фон тела также плавно меняется для удобства работы.

Я использую эффекты морфизма, кнопка и фон имеют красивый переход, который добавляет тумблеру нотку элегантности. Этот тип переключателя можно использовать на различных веб-сайтах или в приложениях, особенно в тех, которым может потребоваться светлый и темный режим для лучшей доступности или просто другой вариант дизайна для пользователя.

Вам это может понравиться

• Анимация кнопки «Поделиться»
• Пользовательские переключатели

Чтобы создать кнопку-переключатель с использованием HTML, CSS и JavaScript, вам необходимо создать два файла: один файл HTML и один файл CSS. После создания этих файлов вы можете скопировать и вставить в них предоставленный код. Вы также можете скопировать весь исходный код.

Создать кнопку-переключатель в HTML, CSS и JavaScript
Создайте папку: Начните с создания папки для вашего проекта. Вы можете назвать его как угодно. Внутри этой папки вам необходимо создать следующие файлы:

index.html (для структуры кнопки «Создать переключатель»)
style.css (для оформления кнопки «Создать переключатель»)
Создайте HTML-файл:

Назовите свой HTML-файл index.html.
Создайте файл CSS:

Назовите свой CSS-файл style.css.
Создайте файл JavaScript:

Назовите свой файл JavaScript script.js.