https://github.com/withaarzoo/animated-eye-toggle

This is a simple HTML and CSS code for creating an animated eye toggle switch. The switch consists of an eye icon that opens and closes as you toggle the switch on and off. It's a fun and creative way to design a toggle switch for your web projects.
https://github.com/withaarzoo/animated-eye-toggle

css html html-css toggle

Last synced: about 10 hours ago
JSON representation

This is a simple HTML and CSS code for creating an animated eye toggle switch. The switch consists of an eye icon that opens and closes as you toggle the switch on and off. It's a fun and creative way to design a toggle switch for your web projects.

• Host: GitHub
• URL: https://github.com/withaarzoo/animated-eye-toggle
• Owner: withaarzoo
• Created: 2023-09-02T11:31:45.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-09-02T11:33:24.000Z (about 1 year ago)
• Last Synced: 2023-12-30T18:51:51.427Z (11 months ago)
• Topics: css, html, html-css, toggle
• Language: CSS
• Homepage:
• Size: 3.91 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Animated Eye Toggle

This is a simple HTML and CSS code for creating an animated eye toggle switch. The switch consists of an eye icon that opens and closes as you toggle the switch on and off. It's a fun and creative way to design a toggle switch for your web projects.

## How to Use

To use this code in your project, follow these steps:

1. Copy the HTML and CSS code provided in the `index.html` and `style.css` files, respectively.

2. Paste the HTML code into your HTML file (e.g., `index.html`) within the `` element.

3. Save the CSS code in a separate CSS file (e.g., `style.css`) in the same directory as your HTML file.

4. Link the CSS file in the `` section of your HTML file by adding the following line inside the `` element:

   ```html

   

   ```

5. Customize the switch's colors and size by adjusting the CSS custom properties (variables) defined in the `:root` selector at the beginning of the CSS code.

6. You can add additional JavaScript functionality to handle the switch's state changes if needed.

7. Open your HTML file in a web browser to see the animated eye toggle in action.

## Customization

You can customize the appearance of the animated eye toggle by modifying the CSS variables defined in the `:root` selector in the `style.css` file:

- `--sz`: Controls the size of the toggle.

- `--on`: Sets the color when the toggle is on.

- `--of`: Sets the color when the toggle is off.

- `--tr`: Defines the transition properties for various elements.

Feel free to experiment with these variables to match the style of your website or application.

## Credits

This code was created by [Your Name] and is released under the [License Name] license.

If you find this code useful or have any suggestions for improvement, please let us know!

## License

[License Name] (e.g., MIT License, Apache License, etc.)

## Preview