https://github.com/withaarzoo/animated-check-box

This is a simple and customizable animated checkbox built with HTML, CSS, and JavaScript. The checkbox has a modern design that includes an animation when it is checked or unchecked.
https://github.com/withaarzoo/animated-check-box

css html webdevelopment

Last synced: about 12 hours ago
JSON representation

This is a simple and customizable animated checkbox built with HTML, CSS, and JavaScript. The checkbox has a modern design that includes an animation when it is checked or unchecked.

• Host: GitHub
• URL: https://github.com/withaarzoo/animated-check-box
• Owner: withaarzoo
• Created: 2023-04-29T09:38:34.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-04-29T11:03:54.000Z (over 1 year ago)
• Last Synced: 2023-12-30T18:51:50.575Z (11 months ago)
• Topics: css, html, webdevelopment
• Language: CSS
• Homepage:
• Size: 5.86 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Animated Checkbox

This is a simple and customizable animated checkbox built with HTML, CSS, and JavaScript. The checkbox has a modern design that includes an animation when it is checked or unchecked.

## Usage

To use this animated checkbox, simply copy and paste the HTML and CSS code into your project. You can then customize the styling to match your project's design.

```html

    

    

    

    

    Animated Checkbox

    


        

        HTML

        

        CSS

        

        JS

    


```

```css

#checklist {

    --background: #ffffff;

    --text: #414856;

    --check: #4F29F0;

    --disabled: #C3C8DE;

    --width: 100px;

    --height: 140px;

    --border-radius: 10px;

    background: var(--background);

    width: var(--width);

    height: var(--height);

    border-radius: var(--border-radius);

    position: relative;

    box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);

    padding: 30px 45px;

    display: grid;

    grid-template-columns: 30px auto;

    align-items: center;

}

#checklist label {

    color: var(--text);

    position: relative;

    cursor: pointer;

    display: grid;

    align-items: center;

    width: -webkit-fit-content;

    width: -moz-fit-content;

    width: fit-content;

    transition: color 0.3s ease;

}

#checklist label::before,

#checklist label::after {

    content: "";

    position: absolute;

}

#checklist label::before {

    height: 2px;

    width: 8px;

    left: -27px;

    background: var(--check);

    border-radius: 2px;

    transition: background 0.3s ease;

}

#checklist label:after {

    height: 4px;

    width: 4px;

    top: 8px;

    left: -25px;

    border-radius: 50%;

}

#checklist input[type=checkbox] {

    -webkit-appearance: none;

    -moz-appearance: none;

    position: relative;

    height: 15px;

    width: 15px;

    outline: none;

    border: 0;

    margin: 0 15px 0 0;

    cursor: pointer;

    background: var(--background);

    display: grid;

}

```

## Customization

The CSS variables can be adjusted to customize the look and feel of the animated checkbox. Here are the variables and their default values:

```css

#checklist {

    --background: #ffffff;

    --text: #414856;

    --check: #4

```

## Preview