이 기사는 원래
에 게시되었습니다. https://notarena.com/

이 코드는 body 요소에 'dark' 클래스를 추가하거나 제거하여 밝은 모드와 어두운 모드 사이를 전환하는 애니메이션 토글 버튼을 생성합니다. 토글 버튼에는 모드를 표시하기 위해 부드럽게 전환되는 원이 있으며, 몸체의 배경도 원활하게 전환되어 원활한 경험을 제공합니다.

모피즘 효과를 사용하고 있습니다. 버튼과 배경에는 토글 스위치에 우아함을 더해주는 아름다운 전환이 있습니다. 이러한 유형의 토글 버튼은 다양한 웹사이트나 애플리케이션에서 사용할 수 있습니다. 특히 더 나은 접근성을 위해 밝은 모드와 어두운 모드가 필요할 수 있거나 사용자를 위한 다른 디자인 옵션이 필요한 웹사이트나 애플리케이션에서 사용할 수 있습니다.

당신이 좋아할 수도 있습니다

• 공유 버튼 애니메이션
• 맞춤형 라디오 버튼

HTML, CSS, JavaScript를 사용하여 토글 버튼을 만들려면 HTML 파일 하나와 CSS 파일 하나, 이렇게 두 개의 파일을 만들어야 합니다. 이러한 파일을 생성한 후 제공된 코드를 복사하여 붙여넣을 수 있습니다. 소스코드를 전부 복사하셔도 됩니다.

HTML CSS 및 JavaScript에서 토글 버튼 만들기
폴더 만들기: 프로젝트에 대한 폴더를 만드는 것부터 시작하세요. 원하는 대로 이름을 지정할 수 있습니다. 이 폴더 안에 다음 파일을 생성해야 합니다:

index.html(토글 버튼 만들기의 구조용)
style.css (토글 버튼 생성 스타일 지정용)
HTML 파일을 생성합니다:

HTML 파일 이름을 index.html로 지정하세요.
CSS 파일 만들기:

CSS 파일 이름을 style.css로 지정하세요.
JavaScript 파일을 생성합니다:

JavaScript 파일 이름을 script.js로 지정하세요.