https://github.com/withaarzoo/toggle-button

Animated Toggle Button Using HTML and CSS
https://github.com/withaarzoo/toggle-button

Last synced: about 12 hours ago
JSON representation

Animated Toggle Button Using HTML and CSS

• Host: GitHub
• URL: https://github.com/withaarzoo/toggle-button
• Owner: withaarzoo
• Created: 2022-10-18T05:16:20.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-01-10T09:23:04.000Z (almost 2 years ago)
• Last Synced: 2023-12-30T18:51:53.752Z (11 months ago)
• Language: CSS
• Size: 12.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Animated Toggle Switch

This is a simple toggle switch animation created using HTML and CSS. It can be used as an on/off button or as a switch to toggle between two different options.

## Features

* Pure HTML and CSS

* Smooth animation on toggle

* Customizable colors and sizes

## How to use

1. Download the `style.css` file and include it in your HTML file using a `link` tag.

2. Add the `.checkbox` class to a `div` element.

3. Inside the `div`, add two `label` elements with the class `checkbox`. These will be the labels for the two options.

4. Add an `input` element with the id `i` and set the `type` attribute to `checkbox`. This will be the actual toggle switch.

5. Customize the colors and sizes by modifying the CSS variables in the `style.css` file.

## Example

```HTML

		

	

		

			


				


			

		

		


			turned

			


				off

				on

			

		

```


## Demo

A demo of the toggle switch can be found [here](https://twitter.com/Aarzoo75/status/1582244041349279744).