CSS Checkboxes

Last Updated:

December 2, 2022

CSS Checkboxes are a type of HTML element that can be used to switch between two or more states.

Mordern style checkboxes HTML CSS

<div class="checkbox-1">
	<input type="checkbox" checked />
	<label></label>
</div>
<div class="checkbox-2">
	<input type="checkbox" checked />
	<label></label>
</div>
<div class="checkbox-3">
	<input type="checkbox" checked />
	<label></label>
</div>

<div class="checkbox-4">
	<input type="checkbox" checked />
	<label></label>
</div>

<div class="checkbox-5">
	<input type="checkbox" checked />
	<label></label>
</div>

<div class="checkbox-6">
	<input type="checkbox" checked />
	<label></label>
</div>

.checkbox-1 {
  position: relative;
  box-sizing: border-box;
}
.checkbox-1 input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
.checkbox-1 label {
  position: relative;
  display: flex;
  align-items: center;
  height: 30px;
  box-sizing: border-box;
}
.checkbox-1 label:before {
  content: "";
  width: 26px;
  height: 26px;
  margin-right: 5px;
  border-radius: 4px;
  box-sizing: border-box;
  border: 2px solid #1565c0;
  display: inline-block;
  transition: 0.2s ease-in;
}
.checkbox-1 label:after {
  content: "";
  position: absolute;
  left: 10px;
  top: 5px;
  z-index: 2;
  width: 8px;
  height: 16px;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  box-sizing: border-box;
  opacity: 0;
  transition: 0.2s 0.2s ease-in;
}
.checkbox-1 input[type="checkbox"]:checked + label:before {
  background-color: #1565c0;
}
.checkbox-1 input[type="checkbox"]:checked + label:after {
  opacity: 1;
}

.checkbox-2 {
  position: relative;
  box-sizing: border-box;
}
.checkbox-2 input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
.checkbox-2 label {
  position: relative;
  display: flex;
  align-items: center;
  height: 30px;
  box-sizing: border-box;
}
.checkbox-2 label:before {
  content: "";
  width: 26px;
  height: 26px;
  margin-right: 5px;
  background: #1565c0;
  border-radius: 6px;
  box-sizing: border-box;
  display: inline-block;
  transition: 0.2s ease-in;
}
.checkbox-2 label:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 14px;
  z-index: 2;
  width: 16px;
  height: 0px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: translateY(0px) rotate(0deg);
  box-sizing: border-box;
  transition: 0.2s cubic-bezier(0.55, 0.06, 0.68, 0.19);
}
.checkbox-2 input[type="checkbox"]:checked + label:after {
  height: 8px;
  transform: translateY(-5px) rotate(-45deg);
}

.checkbox-3 {
  position: relative;
  box-sizing: border-box;
}
.checkbox-3 input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
.checkbox-3 label {
  position: relative;
  display: flex;
  align-items: center;
  height: 30px;
  box-sizing: border-box;
}
.checkbox-3 label:before {
  content: "";
  width: 26px;
  height: 26px;
  margin-right: 5px;
  box-sizing: border-box;
  border: 2px solid #1565c0;
  display: inline-block;
  transition: 0.2s ease-in;
}
.checkbox-3 label:after {
  content: "";
  position: absolute;
  left: 13px;
  top: -5px;
  z-index: 2;
  width: 12px;
  height: 26px;
  border-bottom: 3px solid #3330;
  border-right: 3px solid #3330;
  box-shadow: 0 0 transparent;
  transform: rotate(45deg);
  box-sizing: border-box;
  transition: background 0.2s ease-in, box-shadow 0.2s ease-in;
}
.checkbox-3 input[type="checkbox"]:checked + label:after {
  border-color: #1565c0;
  transition: border 0.3s ease-in;
}

.checkbox-4 {
  position: relative;
  box-sizing: border-box;
}
.checkbox-4 input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
.checkbox-4 label {
  position: relative;
  display: flex;
  align-items: center;
  height: 30px;
  box-sizing: border-box;
}
.checkbox-4 label:before {
  content: "";
  background: #ecf0f3;
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  transition: 0.2s ease-in;
}
.checkbox-4 label:after {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #0001;
  box-sizing: border-box;
  transition: 0.2s ease-in;
}
.checkbox-4 input[type="checkbox"]:checked + label:before {
  background: #ecf0f3;
  box-shadow: 4px 4px 4px 0px #d1d9e6 inset, -4px -4px 4px 0px #f4f8ff inset;
}
.checkbox-4 input[type="checkbox"]:checked + label:after {
  background: #1565c0;
}

.checkbox-5 {
  position: relative;
  box-sizing: border-box;
}
.checkbox-5 input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
.checkbox-5 label {
  position: relative;
  display: flex;
  align-items: center;
  height: 30px;
  box-sizing: border-box;
}
.checkbox-5 label:before {
  content: "";
  width: 26px;
  height: 26px;
  margin-right: 5px;
  box-shadow: 0 0 0 2px #1565c0, inset 0 0 0 2px #1565c0;
  border-radius: 50%;
  box-sizing: border-box;
  display: inline-block;
  transition: 0.2s ease-in;
}
.checkbox-5 label:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 14px;
  z-index: 2;
  width: 16px;
  height: 0px;
  border-bottom: 2px solid transparent;
  border-left: 2px solid transparent;
  transform: translateY(0px) rotate(0deg);
  box-sizing: border-box;
  transition: 0.2s 0.1s cubic-bezier(0.55, 0.06, 0.68, 0.19);
}
.checkbox-5 input[type="checkbox"]:checked + label:before {
  box-shadow: 0 0 0 2px #1565c0, inset 0 0 0 15px #1565c0;
}
.checkbox-5 input[type="checkbox"]:checked + label:after {
  height: 8px;
  transform: translateY(-5px) rotate(-45deg);
  border-color: #fff;
}

.checkbox-6 {
  position: relative;
  box-sizing: border-box;
}
.checkbox-6 input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
.checkbox-6 label {
  position: relative;
  display: flex;
  align-items: center;
  height: 30px;
  box-sizing: border-box;
}
.checkbox-6 label:before {
  content: "";
  width: 26px;
  height: 26px;
  margin-right: 5px;
  border: 2px solid #1565c0;
  border-radius: 50%;
  box-sizing: border-box;
  display: inline-block;
  transition: 0.2s ease-in;
}
.checkbox-6 label:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 14px;
  z-index: 2;
  width: 16px;
  height: 0px;
  border-bottom: 2px solid #0000;
  border-left: 2px solid #0000;
  transform: translateY(0px) rotate(0deg);
  box-sizing: border-box;
  transition: 0.2s cubic-bezier(0.55, 0.06, 0.68, 0.19);
}
.checkbox-6 input[type="checkbox"]:checked + label:before {
  background: #1565c0;
  animation: 0.3s splash ease-in;
}
.checkbox-6 input[type="checkbox"]:checked + label:after {
  height: 8px;
  border-color: #fff;
  transform: translateY(-5px) rotate(-45deg);
}
@keyframes splash {
  0% {
    box-shadow: 0 0 0 0 rgba(21, 101, 192, 1);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(21, 101, 192, 0.5);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(21, 101, 192, 0);
  }
}.checkbox-1 {
  position: relative;
  box-sizing: border-box;
}
.checkbox-1 input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
.checkbox-1 label {
  position: relative;
  display: flex;
  align-items: center;
  height: 30px;
  box-sizing: border-box;
}
.checkbox-1 label:before {
  content: "";
  width: 26px;
  height: 26px;
  margin-right: 5px;
  border-radius: 4px;
  box-sizing: border-box;
  border: 2px solid #1565c0;
  display: inline-block;
  transition: 0.2s ease-in;
}
.checkbox-1 label:after {
  content: "";
  position: absolute;
  left: 10px;
  top: 5px;
  z-index: 2;
  width: 8px;
  height: 16px;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  box-sizing: border-box;
  opacity: 0;
  transition: 0.2s 0.2s ease-in;
}
.checkbox-1 input[type="checkbox"]:checked + label:before {
  background-color: #1565c0;
}
.checkbox-1 input[type="checkbox"]:checked + label:after {
  opacity: 1;
}

.checkbox-2 {
  position: relative;
  box-sizing: border-box;
}
.checkbox-2 input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
.checkbox-2 label {
  position: relative;
  display: flex;
  align-items: center;
  height: 30px;
  box-sizing: border-box;
}
.checkbox-2 label:before {
  content: "";
  width: 26px;
  height: 26px;
  margin-right: 5px;
  background: #1565c0;
  border-radius: 6px;
  box-sizing: border-box;
  display: inline-block;
  transition: 0.2s ease-in;
}
.checkbox-2 label:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 14px;
  z-index: 2;
  width: 16px;
  height: 0px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: translateY(0px) rotate(0deg);
  box-sizing: border-box;
  transition: 0.2s cubic-bezier(0.55, 0.06, 0.68, 0.19);
}
.checkbox-2 input[type="checkbox"]:checked + label:after {
  height: 8px;
  transform: translateY(-5px) rotate(-45deg);
}

.checkbox-3 {
  position: relative;
  box-sizing: border-box;
}
.checkbox-3 input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
.checkbox-3 label {
  position: relative;
  display: flex;
  align-items: center;
  height: 30px;
  box-sizing: border-box;
}
.checkbox-3 label:before {
  content: "";
  width: 26px;
  height: 26px;
  margin-right: 5px;
  box-sizing: border-box;
  border: 2px solid #1565c0;
  display: inline-block;
  transition: 0.2s ease-in;
}
.checkbox-3 label:after {
  content: "";
  position: absolute;
  left: 13px;
  top: -5px;
  z-index: 2;
  width: 12px;
  height: 26px;
  border-bottom: 3px solid #3330;
  border-right: 3px solid #3330;
  box-shadow: 0 0 transparent;
  transform: rotate(45deg);
  box-sizing: border-box;
  transition: background 0.2s ease-in, box-shadow 0.2s ease-in;
}
.checkbox-3 input[type="checkbox"]:checked + label:after {
  border-color: #1565c0;
  transition: border 0.3s ease-in;
}

.checkbox-4 {
  position: relative;
  box-sizing: border-box;
}
.checkbox-4 input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
.checkbox-4 label {
  position: relative;
  display: flex;
  align-items: center;
  height: 30px;
  box-sizing: border-box;
}
.checkbox-4 label:before {
  content: "";
  background: #ecf0f3;
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  transition: 0.2s ease-in;
}
.checkbox-4 label:after {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #0001;
  box-sizing: border-box;
  transition: 0.2s ease-in;
}
.checkbox-4 input[type="checkbox"]:checked + label:before {
  background: #ecf0f3;
  box-shadow: 4px 4px 4px 0px #d1d9e6 inset, -4px -4px 4px 0px #f4f8ff inset;
}
.checkbox-4 input[type="checkbox"]:checked + label:after {
  background: #1565c0;
}

.checkbox-5 {
  position: relative;
  box-sizing: border-box;
}
.checkbox-5 input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
.checkbox-5 label {
  position: relative;
  display: flex;
  align-items: center;
  height: 30px;
  box-sizing: border-box;
}
.checkbox-5 label:before {
  content: "";
  width: 26px;
  height: 26px;
  margin-right: 5px;
  box-shadow: 0 0 0 2px #1565c0, inset 0 0 0 2px #1565c0;
  border-radius: 50%;
  box-sizing: border-box;
  display: inline-block;
  transition: 0.2s ease-in;
}
.checkbox-5 label:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 14px;
  z-index: 2;
  width: 16px;
  height: 0px;
  border-bottom: 2px solid transparent;
  border-left: 2px solid transparent;
  transform: translateY(0px) rotate(0deg);
  box-sizing: border-box;
  transition: 0.2s 0.1s cubic-bezier(0.55, 0.06, 0.68, 0.19);
}
.checkbox-5 input[type="checkbox"]:checked + label:before {
  box-shadow: 0 0 0 2px #1565c0, inset 0 0 0 15px #1565c0;
}
.checkbox-5 input[type="checkbox"]:checked + label:after {
  height: 8px;
  transform: translateY(-5px) rotate(-45deg);
  border-color: #fff;
}

.checkbox-6 {
  position: relative;
  box-sizing: border-box;
}
.checkbox-6 input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
.checkbox-6 label {
  position: relative;
  display: flex;
  align-items: center;
  height: 30px;
  box-sizing: border-box;
}
.checkbox-6 label:before {
  content: "";
  width: 26px;
  height: 26px;
  margin-right: 5px;
  border: 2px solid #1565c0;
  border-radius: 50%;
  box-sizing: border-box;
  display: inline-block;
  transition: 0.2s ease-in;
}
.checkbox-6 label:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 14px;
  z-index: 2;
  width: 16px;
  height: 0px;
  border-bottom: 2px solid #0000;
  border-left: 2px solid #0000;
  transform: translateY(0px) rotate(0deg);
  box-sizing: border-box;
  transition: 0.2s cubic-bezier(0.55, 0.06, 0.68, 0.19);
}
.checkbox-6 input[type="checkbox"]:checked + label:before {
  background: #1565c0;
  animation: 0.3s splash ease-in;
}
.checkbox-6 input[type="checkbox"]:checked + label:after {
  height: 8px;
  border-color: #fff;
  transform: translateY(-5px) rotate(-45deg);
}
@keyframes splash {
  0% {
    box-shadow: 0 0 0 0 rgba(21, 101, 192, 1);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(21, 101, 192, 0.5);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(21, 101, 192, 0);
  }
}

.checkbox-1 {
    position: relative;
    box-sizing: border-box;
    input[type="checkbox"] {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10;
        width: 100%;
        height: 100%;
        cursor: pointer;
        opacity: 0;
        &:checked {
            + {
                label {
                    &:before {
                        background-color: #1565c0;
                    }
                    &:after {
                        opacity: 1;
                    }
                }
            }
        }
    }
    label {
        position: relative;
        display: flex;
        align-items: center;
        height: 30px;
        box-sizing: border-box;
        &:before {
            content: "";
            width: 26px;
            height: 26px;
            margin-right: 5px;
            border-radius: 4px;
            box-sizing: border-box;
            border: 2px solid #1565c0;
            display: inline-block;
            transition: 0.2s ease-in;
        }
        &:after {
            content: "";
            position: absolute;
            left: 10px;
            top: 5px;
            z-index: 2;
            width: 8px;
            height: 16px;
            border-bottom: 2px solid #fff;
            border-right: 2px solid #fff;
            transform: rotate(45deg);
            box-sizing: border-box;
            opacity: 0;
            transition: 0.2s 0.2s ease-in;
        }
    }
}
.checkbox-2 {
    position: relative;
    box-sizing: border-box;
    input[type="checkbox"] {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10;
        width: 100%;
        height: 100%;
        cursor: pointer;
        opacity: 0;
        &:checked {
            + {
                label {
                    &:after {
                        height: 8px;
                        transform: translateY(-5px) rotate(-45deg);
                    }
                }
            }
        }
    }
    label {
        position: relative;
        display: flex;
        align-items: center;
        height: 30px;
        box-sizing: border-box;
        &:before {
            content: "";
            width: 26px;
            height: 26px;
            margin-right: 5px;
            background: #1565c0;
            border-radius: 6px;
            box-sizing: border-box;
            display: inline-block;
            transition: 0.2s ease-in;
        }
        &:after {
            content: "";
            position: absolute;
            left: 5px;
            top: 14px;
            z-index: 2;
            width: 16px;
            height: 0px;
            border-bottom: 2px solid #fff;
            border-left: 2px solid #fff;
            transform: translateY(0px) rotate(0deg);
            box-sizing: border-box;
            transition: 0.2s cubic-bezier(0.55, 0.06, 0.68, 0.19);
        }
    }
}
.checkbox-3 {
    position: relative;
    box-sizing: border-box;
    input[type="checkbox"] {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10;
        width: 100%;
        height: 100%;
        cursor: pointer;
        opacity: 0;
        &:checked {
            + {
                label {
                    &:after {
                        border-color: #1565c0;
                        transition: border 0.3s ease-in;
                    }
                }
            }
        }
    }
    label {
        position: relative;
        display: flex;
        align-items: center;
        height: 30px;
        box-sizing: border-box;
        &:before {
            content: "";
            width: 26px;
            height: 26px;
            margin-right: 5px;
            box-sizing: border-box;
            border: 2px solid #1565c0;
            display: inline-block;
            transition: 0.2s ease-in;
        }
        &:after {
            content: "";
            position: absolute;
            left: 13px;
            top: -5px;
            z-index: 2;
            width: 12px;
            height: 26px;
            border-bottom: 3px solid #3330;
            border-right: 3px solid #3330;
            box-shadow: 0 0 transparent;
            transform: rotate(45deg);
            box-sizing: border-box;
            transition: background 0.2s ease-in, box-shadow 0.2s ease-in;
        }
    }
}
.checkbox-4 {
    position: relative;
    box-sizing: border-box;
    input[type="checkbox"] {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10;
        width: 100%;
        height: 100%;
        cursor: pointer;
        opacity: 0;
        &:checked {
            + {
                label {
                    &:before {
                        background: #ecf0f3;
                        box-shadow: 4px 4px 4px 0px #d1d9e6 inset, -4px -4px 4px 0px #f4f8ff inset;
                    }
                    &:after {
                        background: #1565c0;
                    }
                }
            }
        }
    }
    label {
        position: relative;
        display: flex;
        align-items: center;
        height: 30px;
        box-sizing: border-box;
        &:before {
            content: "";
            background: #ecf0f3;
            cursor: pointer;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            width: 32px;
            height: 32px;
            transition: 0.2s ease-in;
        }
        &:after {
            content: "";
            position: absolute;
            left: 8px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 2;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #0001;
            box-sizing: border-box;
            transition: 0.2s ease-in;
        }
    }
}
.checkbox-5 {
    position: relative;
    box-sizing: border-box;
    input[type="checkbox"] {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10;
        width: 100%;
        height: 100%;
        cursor: pointer;
        opacity: 0;
        &:checked {
            + {
                label {
                    &:before {
                        box-shadow: 0 0 0 2px #1565c0, inset 0 0 0 15px #1565c0;
                    }
                    &:after {
                        height: 8px;
                        transform: translateY(-5px) rotate(-45deg);
                        border-color: #fff;
                    }
                }
            }
        }
    }
    label {
        position: relative;
        display: flex;
        align-items: center;
        height: 30px;
        box-sizing: border-box;
        &:before {
            content: "";
            width: 26px;
            height: 26px;
            margin-right: 5px;
            box-shadow: 0 0 0 2px #1565c0, inset 0 0 0 2px #1565c0;
            border-radius: 50%;
            box-sizing: border-box;
            display: inline-block;
            transition: 0.2s ease-in;
        }
        &:after {
            content: "";
            position: absolute;
            left: 5px;
            top: 14px;
            z-index: 2;
            width: 16px;
            height: 0px;
            border-bottom: 2px solid transparent;
            border-left: 2px solid transparent;
            transform: translateY(0px) rotate(0deg);
            box-sizing: border-box;
            transition: 0.2s 0.1s cubic-bezier(0.55, 0.06, 0.68, 0.19);
        }
    }
}
.checkbox-6 {
    position: relative;
    box-sizing: border-box;
    input[type="checkbox"] {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10;
        width: 100%;
        height: 100%;
        cursor: pointer;
        opacity: 0;
        &:checked {
            + {
                label {
                    &:before {
                        background: #1565c0;
                        animation: 0.3s splash ease-in;
                    }
                    &:after {
                        height: 8px;
                        border-color: #fff;
                        transform: translateY(-5px) rotate(-45deg);
                    }
                }
            }
        }
    }
    label {
        position: relative;
        display: flex;
        align-items: center;
        height: 30px;
        box-sizing: border-box;
        &:before {
            content: "";
            width: 26px;
            height: 26px;
            margin-right: 5px;
            border: 2px solid #1565c0;
            border-radius: 50%;
            box-sizing: border-box;
            display: inline-block;
            transition: 0.2s ease-in;
        }
        &:after {
            content: "";
            position: absolute;
            left: 5px;
            top: 14px;
            z-index: 2;
            width: 16px;
            height: 0px;
            border-bottom: 2px solid #0000;
            border-left: 2px solid #0000;
            transform: translateY(0px) rotate(0deg);
            box-sizing: border-box;
            transition: 0.2s cubic-bezier(0.55, 0.06, 0.68, 0.19);
        }
    }
}

@keyframes splash {
    0% {
        box-shadow: 0 0 0 0 rgba(21, 101, 192, 1);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(21, 101, 192, 0.5);
    }
    100% {
        box-shadow: 0 0 0 20px rgba(21, 101, 192, 0);
    }
}

CSS Toggle Switches

CSS Toggle Switches with Icon

CSS Checkboxes

Mordern style checkboxes HTML CSS

Related Snippets