{"id":20503664,"url":"https://github.com/withaarzoo/gear-toggle-switch","last_synced_at":"2026-04-12T23:43:25.445Z","repository":{"id":189903624,"uuid":"681538524","full_name":"withaarzoo/Gear-Toggle-Switch","owner":"withaarzoo","description":"This is a simple and interactive gear toggle switch implemented using HTML and CSS. It creates a unique visual effect resembling a mechanical gear system. When you toggle the switch, the gears rotate, giving it a dynamic appearance.","archived":false,"fork":false,"pushed_at":"2023-08-22T08:39:44.000Z","size":7,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-16T07:35:35.847Z","etag":null,"topics":["css","html","html-css","toggle-switches"],"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-22T08:24:54.000Z","updated_at":"2023-08-22T08:42:47.000Z","dependencies_parsed_at":"2023-08-22T10:24:08.191Z","dependency_job_id":null,"html_url":"https://github.com/withaarzoo/Gear-Toggle-Switch","commit_stats":null,"previous_names":["aarzoo75/gear-toggle-switch","withaarzoo/gear-toggle-switch"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2FGear-Toggle-Switch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2FGear-Toggle-Switch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2FGear-Toggle-Switch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2FGear-Toggle-Switch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/withaarzoo","download_url":"https://codeload.github.com/withaarzoo/Gear-Toggle-Switch/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242100335,"owners_count":20071698,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["css","html","html-css","toggle-switches"],"created_at":"2024-11-15T19:33:31.215Z","updated_at":"2025-10-18T12:06:13.025Z","avatar_url":"https://github.com/withaarzoo.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Gear Toggle Switch\nThis is a simple and interactive gear toggle switch implemented using HTML and CSS. It creates a unique visual effect resembling a mechanical gear system. When you toggle the switch, the gears rotate, giving it a dynamic appearance.\n\n## Features\n* Realistic gear animation when toggling the switch.\n* Visually appealing design with a mechanical feel.\n* Lightweight and purely implemented in HTML and CSS.\n* Easy to integrate into your web projects.\n  \n## How to Use\nTo use this Gear Toggle Switch in your project, follow these simple steps:\n\n1. \u003cb\u003eHTML Structure:\u003c/b\u003e Add the HTML structure to your web page. Place the following code inside your HTML file where you want the switch to appear.\n\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\u003eGear Toggle Switch\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cdiv class=\"holder\"\u003e\n        \u003cinput class=\"toggle\" type=\"checkbox\" /\u003e\n        \u003cdiv class=\"knob\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"belt1\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"belt2\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"gear3\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"gear9\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"gear9 pos2\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"gear2\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"gear2 pos2\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n2. \u003cb\u003eCSS Styles:\u003c/b\u003e Include the provided CSS styles in your project. Make sure the `style.css` file is in the same directory as your HTML file.\n\n3 \u003cb\u003eCustomization:\u003c/b\u003e You can customize the appearance of the switch by modifying the CSS styles according to your preferences. Refer to the Customization section below for more details.\n\n4. \u003cb\u003eInteraction:\u003c/b\u003e When you toggle the switch, the gears will rotate, creating a dynamic and visually pleasing effect.\n\n## Customization\nYou can customize various aspects of the Gear Toggle Switch by adjusting the CSS styles in the `style.css` file:\n\n* Change the background image of the body to modify the background appearance.\n\n* Adjust the size, colors, and positioning of the gears and knob to match your design preferences.\n\n* Modify the animation properties to change the rotation speed and direction of the gears.\n\nFeel free to experiment and adapt the code to fit your specific project requirements.\n\n## License\nThis project is licensed under the MIT License - see the LICENSE file for details. You are free to use and modify this code for both personal and commercial purposes.\n\u003chr\u003e\n\nEnjoy using the Gear Toggle Switch in your web projects! If you have any questions or suggestions, please don't hesitate to \u003ca href=\"https://api.whatsapp.com/send?phone=+917586073575\u0026text=Hello%20Aarzoo!\"\u003econtact us\u003c/a\u003e.\n\n## Preview\n\u003cimg width=\"910\" alt=\"Screenshot 2023-08-22 135014\" src=\"https://github.com/Aarzoo75/Gear-Toggle-Switch/assets/59678435/06a0e5a1-d24b-417f-96d4-c35f79669430\"\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwithaarzoo%2Fgear-toggle-switch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwithaarzoo%2Fgear-toggle-switch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwithaarzoo%2Fgear-toggle-switch/lists"}