Checkbox UI Toggles | HTML CSS

Checkboxes UI

I wanted to create UI Checkboxes . Initially, I tried it with HTML CSS.

I made some below are the examples

Try Coding Yourself with your own customizations

Html File Source code

1. ➤ Add-in <body></body> Tag element :-

CSS Text Animation

Login SignUp Forms

Loading Animations

Fun Javascript Tutorials

Button Animations /Button Effects

2. ➤ CSS code File :-

/* Created by Coding Hindi/

body {
  font-family: 'Open Sans', sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
}

.checkboxes__row {
  display: flex;
}

.checkboxes__row:not(:last-child) {
  border-bottom: 1px solid #eee;
}

.checkboxes__item {
  padding: 15px;
  width: 50%;
}

/* STYLE A */

.checkbox.style-a {
  display: inline-block;
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox.style-a input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkbox.style-a input:checked~.checkbox__checkmark {
  background-color: #fff;
}

.checkbox.style-a input:checked~.checkbox__checkmark:after {
  opacity: 1;
}

.checkbox.style-a:hover input~.checkbox__checkmark {
  background-color: #eee;
}

.checkbox.style-a:hover input:checked~.checkbox__checkmark {
  background-color: #fff;
}

.checkbox.style-a .checkbox__checkmark {
  position: absolute;
  top: 4px;
  left: 0;
  height: 16px;
  width: 16px;
  background-color: #fff;
  border: 1px solid #333;
  transition: background-color 0.25s ease;
  border-radius: 3px;
}

.checkbox.style-a .checkbox__checkmark:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #333;
  border-width: 0 1px 1px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.checkbox.style-a .checkbox__body {
  color: #333;
  line-height: 1.4;
  font-size: 16px;
}

/* STYLE B */

.checkbox.style-b {
  display: inline-block;
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox.style-b input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkbox.style-b input:checked~.checkbox__checkmark {
  background-color: #fff;
}

.checkbox.style-b input:checked~.checkbox__checkmark:after {
  opacity: 1;
}

.checkbox.style-b:hover input~.checkbox__checkmark {
  background-color: #eee;
}

.checkbox.style-b:hover input:checked~.checkbox__checkmark {
  background-color: #fff;
}

.checkbox.style-b .checkbox__checkmark {
  position: absolute;
  top: 3px;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #fff;
  border: 2px solid #333;
  transition: background-color 0.25s ease;
  border-radius: 4px;
}

.checkbox.style-b .checkbox__checkmark:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #333;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.checkbox.style-b .checkbox__body {
  color: #333;
  line-height: 1.4;
  font-size: 16px;
  font-weight: bold;
}

/* STYLE C */

.checkbox.style-c {
  display: inline-block;
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox.style-c input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkbox.style-c input:checked~.checkbox__checkmark {
  background-color: #f7cb15;
}

.checkbox.style-c input:checked~.checkbox__checkmark:after {
  opacity: 1;
}

.checkbox.style-c:hover input~.checkbox__checkmark {
  background-color: #eee;
}

.checkbox.style-c:hover input:checked~.checkbox__checkmark {
  background-color: #f7cb15;
}

.checkbox.style-c .checkbox__checkmark {
  position: absolute;
  top: 2px;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
  transition: background-color 0.25s ease;
  border-radius: 4px;
}

.checkbox.style-c .checkbox__checkmark:after {
  content: "";
  position: absolute;
  left: 8px;
  top: 4px;
  width: 5px;
  height: 10px;
  border: solid #333;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.checkbox.style-c .checkbox__body {
  color: #333;
  line-height: 1.4;
  font-size: 16px;
}

/* STYLE D */

.checkbox.style-d {
  display: inline-block;
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox.style-d input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkbox.style-d input:checked~.checkbox__checkmark {
  background-color: #f7cb15;
}

.checkbox.style-d input:checked~.checkbox__checkmark:after {
  opacity: 1;
}

.checkbox.style-d:hover input~.checkbox__checkmark {
  background-color: #eee;
}

.checkbox.style-d:hover input:checked~.checkbox__checkmark {
  background-color: #f7cb15;
}

.checkbox.style-d:hover input~.checkbox__body {
  color: #f7cb15;
}

.checkbox.style-d .checkbox__checkmark {
  position: absolute;
  top: 1px;
  left: 0;
  height: 22px;
  width: 22px;
  background-color: #eee;
  transition: background-color 0.25s ease;
  border-radius: 11px;
}

.checkbox.style-d .checkbox__checkmark:after {
  content: "";
  position: absolute;
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid #333;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.checkbox.style-d .checkbox__body {
  color: #333;
  line-height: 1.4;
  font-size: 16px;
  transition: color 0.25s ease;
}

/* STYLE E */

.checkbox.style-e {
  display: inline-block;
  position: relative;
  padding-left: 50px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox.style-e input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkbox.style-e input:checked~.checkbox__checkmark {
  background-color: #f7cb15;
}

.checkbox.style-e input:checked~.checkbox__checkmark:after {
  left: 21px;
}

.checkbox.style-e:hover input~.checkbox__checkmark {
  background-color: #eee;
}

.checkbox.style-e:hover input:checked~.checkbox__checkmark {
  background-color: #f7cb15;
}

.checkbox.style-e .checkbox__checkmark {
  position: absolute;
  top: 1px;
  left: 0;
  height: 22px;
  width: 40px;
  background-color: #eee;
  transition: background-color 0.25s ease;
  border-radius: 11px;
}

.checkbox.style-e .checkbox__checkmark:after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 16px;
  height: 16px;
  display: block;
  background-color: #fff;
  border-radius: 50%;
  transition: left 0.25s ease;
}

.checkbox.style-e .checkbox__body {
  color: #333;
  line-height: 1.4;
  font-size: 16px;
  transition: color 0.25s ease;
}

/* STYLE F */

.checkbox.style-f {
  display: inline-block;
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox.style-f input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkbox.style-f input:checked~.checkbox__checkmark {
  background-color: #eee;
}

.checkbox.style-f input:checked~.checkbox__checkmark:after {
  transform: scale(1);
}

.checkbox.style-f input:checked~.checkbox__body {
  font-weight: bold;
}

.checkbox.style-f:hover input~.checkbox__checkmark {
  background-color: #eee;
}

.checkbox.style-f:hover input:checked~.checkbox__checkmark {
  background-color: #eee;
}

.checkbox.style-f .checkbox__checkmark {
  position: absolute;
  top: 1px;
  left: 0;
  height: 22px;
  width: 22px;
  background-color: #eee;
  transition: background-color 0.25s ease;
  border-radius: 11px;
}

.checkbox.style-f .checkbox__checkmark:after {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  width: 22px;
  height: 22px;
  display: block;
  background-color: #f7cb15;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.25s ease;
}

.checkbox.style-f .checkbox__body {
  color: #333;
  line-height: 1.4;
  font-size: 16px;
  transition: font-weight 0.25s ease;
}

/* STYLE G */

.checkbox.style-g {
  display: inline-block;
  position: relative;
  padding-right: 40px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox.style-g input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkbox.style-g input:checked~.checkbox__checkmark {
  background-color: #fff;
}

.checkbox.style-g input:checked~.checkbox__checkmark:after {
  opacity: 1;
  left: 8px;
}

.checkbox.style-g input:checked~.checkbox__body {
  font-weight: bold;
}

.checkbox.style-g:hover input~.checkbox__checkmark {
  background-color: #eee;
}

.checkbox.style-g:hover input:checked~.checkbox__checkmark {
  background-color: #eee;
}

.checkbox.style-g .checkbox__checkmark {
  position: absolute;
  top: 1px;
  right: 0;
  height: 22px;
  width: 22px;
  background-color: #eee;
  transition: background-color 0.25s ease;
  border-radius: 4px;
}

.checkbox.style-g .checkbox__checkmark:after {
  content: "";
  position: absolute;
  left: -20px;
  top: -8px;
  width: 15px;
  height: 25px;
  border: solid #f7cb15;
  border-width: 0 4px 4px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.25s ease, left 0.25s ease;
}

.checkbox.style-g .checkbox__body {
  color: #333;
  line-height: 1.4;
  font-size: 16px;
  transition: font-weight 0.25s ease;
}

/* STYLE H */

.checkbox.style-h {
  display: block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox.style-h input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkbox.style-h input:checked~.checkbox__checkmark {
  background-color: #f7cb15;
}

.checkbox.style-h input:checked~.checkbox__checkmark:after {
  opacity: 1;
  top: -3px;
}

.checkbox.style-h input:checked~.checkbox__body {
  background-position: 0 0;
  color: #fff;
}

.checkbox.style-h:hover input~.checkbox__checkmark {
  background-color: #f7cb15;
}

.checkbox.style-h:hover input:checked~.checkbox__checkmark {
  background-color: #f7cb15;
}

.checkbox.style-h:hover .checkbox__body {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

.checkbox.style-h .checkbox__checkmark {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 15px;
  height: 22px;
  width: 22px;
  background-color: #f7cb15;
  transition: background-color 0.25s ease;
  border-radius: 4px;
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.1), inset -2px -2px 4px rgba(255, 255, 255, 0.4);
}

.checkbox.style-h .checkbox__checkmark:after {
  content: "";
  position: absolute;
  left: 10px;
  top: -15px;
  width: 10px;
  height: 20px;
  border: solid #fff;
  border-width: 0 4px 4px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.25s ease, top 0.25s ease;
}

.checkbox.style-h .checkbox__body {
  color: #333;
  line-height: 1.4;
  font-size: 16px;
  transition: font-weight 0.25s ease;
  font-weight: bold;
  color: #333;
  background: linear-gradient(45deg, #ff0070 0%, #f7cb15 50%, #f7cb15 50%, #f7cb15 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  padding: 15px;
  padding-left: 52px;
  border-radius: 10px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.25s ease, background 1s ease, color 0.25s ease;
}

/* STYLE I */

.checkbox.style-i {
  display: block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding-left: 65px;
}

.checkbox.style-i input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkbox.style-i input:checked~.checkbox__checkmark {
  background-color: #49db44;
}

.checkbox.style-i input:checked~.checkbox__checkmark:after {
  transform: rotate(90deg) translateY(-50%) translateX(-50%);
  background-color: #49db44;
}

.checkbox.style-i .checkbox__checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  width: 50px;
  background-color: #ff0070;
  transition: background-color 0.25s ease;
  border-radius: 50%;
}

.checkbox.style-i .checkbox__checkmark:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80%;
  height: 12px;
  border-radius: 6px;
  transform: rotate(0deg) translateY(-50%) translateX(-50%);
  transform-origin: left top;
  background-color: #ff0070;
  transition: transform 0.25s ease, background-color 0.25s ease;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2), -2px -2px 4px rgba(255, 255, 255, 0.6);
}

.checkbox.style-i .checkbox__body {
  font-weight: bold;
  font-size: 30px;
}

CSS Text Animation

Login SignUp Forms

Loading Animations

Fun Javascript Tutorials

Button Animations /Button Effects

If you like this content

please comment down below

Share This Post

If you have any questions related to coding problems ask us

any suggestions tell us

Thanks for reading this article #CodingHindi

Coding Hindi

Checkbox UI Toggles | HTML CSS

Checkboxes UI

Try Coding Yourself with your own customizations

Html File Source code

1 comment

Why should we use strict in JavaScript

78 Interview Questions for Web Development

What is an API ?

Checklist UI Using html-css

Cool Waves Animation Using HTML CSS with Source Code