Colorful Checkboxes by admin

0 Add to Favorites

HTML Code
CSS Code

:root {
  --light-color: #eaeaea;
  --toggle-size: 7vw;
  --default-toggle-color: hsl(220, 75%, 60%);
  --toggle-border-color: hsl(0, 0%, 75%);
  --inner-toggle-color: var(--light-color);

--red-color: hsl(0, 75%, 60%);
  --orange-color: hsl(40, 85%, 60%);
  --yellow-color: hsl(60, 70%, 55%);
  --green-color: hsl(105, 75%, 60%);
  --marine-color: hsl(180, 75%, 60%);
  --blue-color: hsl(220, 75%, 60%);
  --violet-color: hsl(280, 75%, 60%);
  --pink-color: hsl(310, 75%, 60%);
}
.items-container {
  position: absolute;
  display: flex;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  flex-direction: row;
}
.items-container .toggle-container:not(:last-of-type) {
  margin-right: calc(var(--toggle-size) * 0.25);
}
/* 
    Toggle styles are applied here
*/
.items-container .toggle-container {
  position: relative;
  display: inline-block;
}
.items-container .toggle-container input:not([type="text"]) {
  display: none;
}
.items-container .toggle-container .toggle {
  position: relative;
  width: var(--toggle-size);
  height: var(--toggle-size);
  background-color: var(--toggle-border-color);
  border-radius: 50%;
  cursor: pointer;
  animation: uncheckedToggle linear 150ms 2;
  transition: all 500ms cubic-bezier(0.26, 1.11, 0.61, 1.04);
}
.items-container .toggle-container .toggle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--inner-toggle-color);
  width: calc(var(--toggle-size) * 0.85);
  height: calc(var(--toggle-size) * 0.85);
  border-radius: 50%;
  transition: all 500ms cubic-bezier(0.26, 1.11, 0.61, 1.04);
}
.items-container .toggle-container input:not(:checked) + .toggle:active::before,
.items-container .toggle-container input:not(:checked) + .toggle:focus::before {
  width: calc(var(--toggle-size) * 0.75);
  height: calc(var(--toggle-size) * 0.75);
}
.items-container .toggle-container input:checked ~ .toggle {
  background-color: var(--default-toggle-color);
}
.items-container .toggle-container input:checked ~ .toggle::before {
  width: calc(var(--toggle-size) * 0.25);
  height: calc(var(--toggle-size) * 0.25);
}
.items-container .toggle-container input:checked + .toggle {
  animation: checkedToggle linear 150ms 2;
}
.items-container .toggle-container input:checked ~ .toggle.red {
  background-color: var(--red-color) !important;
}
.items-container .toggle-container input:checked ~ .toggle.orange {
  background-color: var(--orange-color) !important;
}
.items-container .toggle-container input:checked ~ .toggle.yellow {
  background-color: var(--yellow-color) !important;
}
.items-container .toggle-container input:checked ~ .toggle.green {
  background-color: var(--green-color) !important;
}
.items-container .toggle-container input:checked ~ .toggle.marine {
  background-color: var(--marine-color) !important;
}
.items-container .toggle-container input:checked ~ .toggle.blue {
  background-color: var(--blue-color) !important;
}
.items-container .toggle-container input:checked ~ .toggle.violet {
  background-color: var(--violet-color) !important;
}
.items-container .toggle-container input:checked ~ .toggle.pink {
  background-color: var(--pink-color) !important;
}
@keyframes checkedToggle {
  0% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1.05);
  }
}
@keyframes uncheckedToggle {
  0% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1.05);
  }
}

Uploaded: 13th July 2024

Tags: #colorful, #round, #primary, #pulse, #animated

CSSPortal

( admin )

We share content found online. We don't claim credit of anything posted here. If you see your work, let us know and we can move it to your account.

•Website•X (Twitter)

CSS Properties Used

There are 16 CSS properties used in the above example. Click to view and learn about each property.

position display top left transform flex-direction margin-right input width height background-color border-radius cursor animation transition content