{"id":20503658,"url":"https://github.com/withaarzoo/elastic-toggle-switch","last_synced_at":"2026-05-29T18:31:12.560Z","repository":{"id":188421614,"uuid":"678713438","full_name":"withaarzoo/Elastic-Toggle-Switch","owner":"withaarzoo","description":"An elegant and visually appealing toggle switch with elastic animation and dynamic lighting effects.","archived":false,"fork":false,"pushed_at":"2023-08-15T07:45:29.000Z","size":5,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-06T12:34:45.936Z","etag":null,"topics":["codewithaarzoo","css","html","html-css-project","toggle-switch"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/withaarzoo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-08-15T07:37:24.000Z","updated_at":"2024-09-16T19:46:59.000Z","dependencies_parsed_at":"2023-08-15T08:55:05.603Z","dependency_job_id":null,"html_url":"https://github.com/withaarzoo/Elastic-Toggle-Switch","commit_stats":null,"previous_names":["aarzoo75/elastic-toggle-switch","withaarzoo/elastic-toggle-switch"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/withaarzoo/Elastic-Toggle-Switch","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2FElastic-Toggle-Switch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2FElastic-Toggle-Switch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2FElastic-Toggle-Switch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2FElastic-Toggle-Switch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/withaarzoo","download_url":"https://codeload.github.com/withaarzoo/Elastic-Toggle-Switch/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2FElastic-Toggle-Switch/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33666290,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-29T02:00:06.066Z","response_time":107,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["codewithaarzoo","css","html","html-css-project","toggle-switch"],"created_at":"2024-11-15T19:33:30.464Z","updated_at":"2026-05-29T18:31:12.533Z","avatar_url":"https://github.com/withaarzoo.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Elastic Toggle Switch\nAn elegant and visually appealing toggle switch with elastic animation and dynamic lighting effects.\n\n## Description\nThis repository contains HTML and CSS code for an Elastic Toggle Switch, a user interface element that provides a toggle functionality with an interactive design. The switch has a unique elastic animation when toggled, and it features dynamic lighting effects to enhance the visual experience.\n\n## Features\n* Elastic animation when toggling the switch.\n* Dynamic lighting effects that respond to the switch state.\n* Modern and stylish design.\n\n## Usage\n1. Clone this repository or copy the HTML and CSS code to your project.\n2. Include the `style.css` file in your HTML using the `\u003clink\u003e` tag.\n3. Add the following HTML code to your desired location:\n```HTML\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n  \u003clink rel=\"stylesheet\" href=\"style.css\"\u003e\n  \u003ctitle\u003eElastic Toggle Switch\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv class=\"content\"\u003e\n    \u003cinput type=\"checkbox\" id=\"btn\"\u003e\n    \u003clabel for=\"btn\"\u003e\n      \u003cspan class=\"thumb\"\u003e\u003c/span\u003e\n    \u003c/label\u003e\n    \u003cdiv class=\"lights\"\u003e\n      \u003cspan class=\"light-off\"\u003e\u003c/span\u003e\n      \u003cspan class=\"light-on\"\u003e\u003c/span\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Customization\nYou can easily customize the appearance of the Elastic Toggle Switch by modifying the CSS variables defined in the `style.css` file. The following are some of the variables you can adjust:\n\n* `--sz`: Controls the overall size of the toggle switch.\n* `--on`: Defines the color for the \"on\" state.\n* `--of`: Defines the color for the \"off\" state.\n* `--sp`: Controls the speed of animations.\n  \nFeel free to explore the CSS code and experiment with different values to achieve the desired visual effects.\n\n## Credits\nThis Elastic Toggle Switch was inspired by creative UI designs and animations found on various design platforms. The code for this toggle switch was written by [Aarzoo Islam](https://twitter.com/Aarzoo75), based on their interpretation of those design concepts.\n\n## License\nThis code is provided under the MIT License.\n\n## Preview\n\u003cimg width=\"905\" alt=\"Screenshot 2023-08-15 131300\" src=\"https://github.com/Aarzoo75/Elastic-Toggle-Switch/assets/59678435/5763dfdd-9cd0-4ed8-8830-9848046f7a03\"\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwithaarzoo%2Felastic-toggle-switch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwithaarzoo%2Felastic-toggle-switch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwithaarzoo%2Felastic-toggle-switch/lists"}