HTML CSS 및 JavaScript로 토글 버튼 만들기

이 글은 원래
에 게재되었습니다. https://notarena.com/

이 코드는 본문 요소에 '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로 지정하세요.

위 내용은 HTML CSS 및 JavaScript로 토글 버튼 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!