https://github.com/p-cauty/css-toggle

A minimalist CSS-only toggle for your websites
https://github.com/p-cauty/css-toggle

Last synced: 3 months ago
JSON representation

A minimalist CSS-only toggle for your websites

• Host: GitHub
• URL: https://github.com/p-cauty/css-toggle
• Owner: p-cauty
• License: mit
• Created: 2021-10-11T08:51:27.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-07-09T17:58:28.000Z (over 2 years ago)
• Last Synced: 2024-08-05T08:09:09.141Z (7 months ago)
• Language: HTML
• Size: 14.6 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# css-toggle

A minimalist CSS-only toggle for your websites.

![image](https://user-images.githubusercontent.com/4071737/136765142-2d28886b-de0d-438e-b406-a4d74756c280.png)

![image](https://user-images.githubusercontent.com/4071737/136765564-886c13d4-294c-4934-afd1-544836a67cce.png)

## Installation

Just copy the `toggle.css` file into your project and add the following line of HTML into your `` tag:

```html

```

## Usage

Just add these two elements anywhere in your HTML:

```html

```

You can add an infinite number of toggles as long as they all have differents id/for attributes.

## Example

You can see a working example right here : https://p-cauty.github.io/css-toggle/

## Use the value in your backend

Just add a `name` attribute to your `input` tags and handle them as regular checkboxes in your backend.