在 HTML CSS 和 JavaScript 中建立切換按鈕

本文原刊於
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。

以上是在 HTML CSS 和 JavaScript 中建立切換按鈕的詳細內容。更多資訊請關注PHP中文網其他相關文章！