https://github.com/withaarzoo/elastic-toggle-switch

An elegant and visually appealing toggle switch with elastic animation and dynamic lighting effects.
https://github.com/withaarzoo/elastic-toggle-switch

codewithaarzoo css html html-css-project toggle-switch

Last synced: about 10 hours ago
JSON representation

An elegant and visually appealing toggle switch with elastic animation and dynamic lighting effects.

• Host: GitHub
• URL: https://github.com/withaarzoo/elastic-toggle-switch
• Owner: withaarzoo
• Created: 2023-08-15T07:37:24.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-08-15T07:45:29.000Z (over 1 year ago)
• Last Synced: 2023-12-30T18:51:52.926Z (11 months ago)
• Topics: codewithaarzoo, css, html, html-css-project, toggle-switch
• Language: CSS
• Homepage:
• Size: 4.88 KB
• Stars: 1
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Elastic Toggle Switch

An elegant and visually appealing toggle switch with elastic animation and dynamic lighting effects.

## Description

This 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.

## Features

* Elastic animation when toggling the switch.

* Dynamic lighting effects that respond to the switch state.

* Modern and stylish design.

## Usage

1. Clone this repository or copy the HTML and CSS code to your project.

2. Include the `style.css` file in your HTML using the `` tag.

3. Add the following HTML code to your desired location:

```HTML

  

  

  

  Elastic Toggle Switch

  


    

    

      

    

    


      

      

    

  


```

## Customization

You 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:

* `--sz`: Controls the overall size of the toggle switch.

* `--on`: Defines the color for the "on" state.

* `--of`: Defines the color for the "off" state.

* `--sp`: Controls the speed of animations.

  

Feel free to explore the CSS code and experiment with different values to achieve the desired visual effects.

## Credits

This 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.

## License

This code is provided under the MIT License.

## Preview