HTML CSS と JavaScript でトグル ボタンを作成する

この記事は元々
で公開されました。 https://notarena.com/

このコードは、body 要素の「dark」クラスを追加または削除することによって、ライト モードとダーク モードを切り替えるアニメーション トグル ボタンを作成します。トグルボタンには、モードを示すために滑らかに遷移する円があり、体の背景も滑らかに遷移し、シームレスな体験を実現します。

モーフィズム効果を使用しています。ボタンと背景には美しいトランジションがあり、トグル スイッチに優雅さを加えています。このタイプのトグル ボタンは、さまざまな Web サイトやアプリケーション、特にアクセシビリティを向上させるためにライト モードとダーク モードを必要とする場合や、ユーザーの異なるデザイン オプションを必要とする場合に使用できます。

これが気に入るかもしれません

• 共有ボタンのアニメーション
• カスタムラジオボタン

HTML、CSS、JavaScript を使用してトグル ボタンを作成するには、HTML ファイルと CSS ファイルの 2 つのファイルを作成する必要があります。これらのファイルを作成した後、提供されたコードをコピーしてファイルに貼り付けることができます。すべてのソース コードをコピーすることもできます。

HTML CSS と JavaScript でトグル ボタンを作成する
フォルダーの作成: まず、プロジェクト用のフォルダーを作成します。好きな名前を付けることができます。このフォルダー内に次のファイルを作成する必要があります:

index.html (トグルボタンの作成の構造用)
style.css (トグルボタンの作成のスタイル設定用)
HTML ファイルを作成します:

HTML ファイルにindex.html という名前を付けます。
CSS ファイルを作成します:

CSS ファイルに style.css という名前を付けます。
JavaScript ファイルを作成します:

JavaScript ファイルに script.js という名前を付けます。

以上がHTML CSS と JavaScript でトグル ボタンを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。