Create an Account

It's free and you have access to premium codes!

Password must be a minimum length of 8, with at least one uppercase, one lowercase, one number, and one special character.

Login

Welcome back! Please login to your account.

Recover Account

Don't worry, we'll send you a message to help you to recover your acount.

Message Received!

We will get back to you as soon as possible.

Account Created!

Please check your email for instructions to activate your account.

All
Hello
Popular Sites
JavaScript Best Codes
Html Free Codes
Html5 Free Codes
Php Best Codes
Developer Codes
Free Frontend
Social Media
Twitter
Instagram
Support
Contact Us
About Html Best Codes
Not a member? Sign Up

Simple Stylish Checklist

Written by @kerixa 22 May 2020

To show progress in a plan, you have to put a checklist and strike through each step done. It can be a personal plan or a process in your website. Below you can find a simple way to have a stylish checklist in your web page.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Varela+Round&amp;display=swap'>
<style>
#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;
  -webkit-box-align: center;
          align-items: center;
}
#checklist label {
  color: var(--text);
  position: relative;
  cursor: pointer;
  display: grid;
  -webkit-box-align: center;
          align-items: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-transition: color .3s ease;
  transition: color .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;
  -webkit-transition: background .3s ease;
  transition: background .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;
  -webkit-box-align: center;
          align-items: center;
}
#checklist input[type="checkbox"]::before, #checklist input[type="checkbox"]::after {
  content: "";
  position: absolute;
  height: 2px;
  top: auto;
  background: var(--check);
  border-radius: 2px;
}
#checklist input[type="checkbox"]::before {
  width: 0px;
  right: 60%;
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom;
}
#checklist input[type="checkbox"]::after {
  width: 0px;
  left: 40%;
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
}
#checklist input[type="checkbox"]:checked::before {
  -webkit-animation: check-01 .4s ease forwards;
          animation: check-01 .4s ease forwards;
}
#checklist input[type="checkbox"]:checked::after {
  -webkit-animation: check-02 .4s ease forwards;
          animation: check-02 .4s ease forwards;
}
#checklist input[type="checkbox"]:checked + label {
  color: var(--disabled);
  -webkit-animation: move .3s ease .1s forwards;
          animation: move .3s ease .1s forwards;
}
#checklist input[type="checkbox"]:checked + label::before {
  background: var(--disabled);
  -webkit-animation: slice .4s ease forwards;
          animation: slice .4s ease forwards;
}
#checklist input[type="checkbox"]:checked + label::after {
  -webkit-animation: firework .5s ease forwards .1s;
          animation: firework .5s ease forwards .1s;
}

@-webkit-keyframes move {
  50% {
    padding-left: 8px;
    padding-right: 0px;
  }
  100% {
    padding-right: 4px;
  }
}

@keyframes move {
  50% {
    padding-left: 8px;
    padding-right: 0px;
  }
  100% {
    padding-right: 4px;
  }
}
@-webkit-keyframes slice {
  60% {
    width: 100%;
    left: 4px;
  }
  100% {
    width: 100%;
    left: -2px;
    padding-left: 0;
  }
}
@keyframes slice {
  60% {
    width: 100%;
    left: 4px;
  }
  100% {
    width: 100%;
    left: -2px;
    padding-left: 0;
  }
}
@-webkit-keyframes check-01 {
  0% {
    width: 4px;
    top: auto;
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  50% {
    width: 0px;
    top: auto;
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  51% {
    width: 0px;
    top: 8px;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  100% {
    width: 5px;
    top: 8px;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
}
@keyframes check-01 {
  0% {
    width: 4px;
    top: auto;
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  50% {
    width: 0px;
    top: auto;
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  51% {
    width: 0px;
    top: 8px;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  100% {
    width: 5px;
    top: 8px;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
}
@-webkit-keyframes check-02 {
  0% {
    width: 4px;
    top: auto;
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  50% {
    width: 0px;
    top: auto;
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  51% {
    width: 0px;
    top: 8px;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  100% {
    width: 10px;
    top: 8px;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
}
@keyframes check-02 {
  0% {
    width: 4px;
    top: auto;
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  50% {
    width: 0px;
    top: auto;
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  51% {
    width: 0px;
    top: 8px;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  100% {
    width: 10px;
    top: 8px;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
}
@-webkit-keyframes firework {
  0% {
    opacity: 1;
    box-shadow: 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    box-shadow: 0 -15px 0 0px #4F29F0, 14px -8px 0 0px #4F29F0, 14px 8px 0 0px #4F29F0, 0 15px 0 0px #4F29F0, -14px 8px 0 0px #4F29F0, -14px -8px 0 0px #4F29F0;
  }
}
@keyframes firework {
  0% {
    opacity: 1;
    box-shadow: 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    box-shadow: 0 -15px 0 0px #4F29F0, 14px -8px 0 0px #4F29F0, 14px 8px 0 0px #4F29F0, 0 15px 0 0px #4F29F0, -14px 8px 0 0px #4F29F0, -14px -8px 0 0px #4F29F0;
  }
}
body {
  background: #E8EBF3;
  height: 100vh;
  font: 400 16px 'Varela Round', sans-serif;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}
body .socials {
  position: fixed;
  display: block;
  left: 20px;
  bottom: 20px;
}
body .socials > a {
  display: block;
  width: 30px;
  opacity: .2;
  -webkit-transform: scale(var(--scale, 0.8));
          transform: scale(var(--scale, 0.8));
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);
  transition: -webkit-transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);
  transition: transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);
  transition: transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91), -webkit-transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);
}
body .socials > a:hover {
  --scale: 1;
}
</style>
<div id="checklist">
<input id="01" type="checkbox" name="r" value="1" checked>
<label for="01">Javascript</label>
<input id="02" type="checkbox" name="r" value="2">
<label for="02">HTML</label>
<input id="03" type="checkbox" name="r" value="3">
<label for="03">CSS</label>
</div><a target='_blank' href='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300
TRENDING POST
1
Neomorphism Button with Hover Effect
2
Vanishing Spinning Ball Loader
3
Yet Another Circle Spinning Loader
4
Oval Ticker Spinner Loader
5
Eclipse Spinner Loader
VISITORS
Online Users: 12
Recent Members: Muzamiru, TheDewalt, sahjahan, fk khan, Proper
advertisement 2