CheckBox - WebDevTales

51 Checkboxes

Modern, responsive Checkbox for sleek UI design

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<div class="checkbox-container">
  <label class="checkbox">
    <input type="checkbox" value="option1">
    <span class="custom-checkbox"></span>
    Option 1
  </label>
  <label class="checkbox">
    <input type="checkbox" value="option2">
    <span class="custom-checkbox"></span>
    Option 2
  </label>
</div>

body {
  font-family: Arial, sans-serif;
  background: linear-gradient(120deg, #ff7e5f, #feb47b);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.checkbox-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.checkbox {
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  cursor: pointer;
}

.checkbox input {
  display: none;
}

.custom-checkbox {
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  margin-right: 1rem;
  background: linear-gradient(135deg, #fff, #d4d4d4);
  border-radius: 0.3rem;
  box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.3);
  position: relative;
  transition: all 0.3s ease;
}

.checkbox input:checked + .custom-checkbox {
  background: linear-gradient(135deg, #ff4081, #f06292);
  box-shadow: 0 0.5rem 1rem rgba(255, 64, 129, 0.5);
}

.checkbox input:checked + .custom-checkbox::after {
  content: '';
  width: 1rem;
  height: 1rem;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 0.1rem;
  border-left: 0.2rem solid #fff;
  border-bottom: 0.2rem solid #fff;
}

<!-- No js code needed for this loader -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<div class="checkbox-group">
  <label class="checkbox-container">
    <input type="checkbox" />
    <div class="checkbox-custom"></div>
    <span class="checkbox-label">Checkbox 1</span>
  </label>
  <label class="checkbox-container">
    <input type="checkbox" />
    <div class="checkbox-custom"></div>
    <span class="checkbox-label">Checkbox 2</span>
  </label>
</div>

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: linear-gradient(45deg, #0f2027, #203a43, #2c5364);
  color: #ffffff;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.checkbox-container {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.checkbox-container input[type="checkbox"] {
  display: none;
}

.checkbox-custom {
  width: 2rem;
  height: 2rem;
  border: 0.2rem solid #56ccf2;
  border-radius: 0.5rem;
  background: #2f4f4f;
  position: relative;
  transition: background 0.4s ease, border-color 0.4s ease;
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom {
  background: linear-gradient(135deg, #56ccf2, #2f80ed);
  border-color: #2f80ed;
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 0.5rem;
  border: solid #ffffff;
  border-width: 0 0.4rem 0.4rem 0;
  transform: translate(-50%, -50%) rotate(-45deg);
  animation: checkmark 0.3s ease forwards;
}

@keyframes checkmark {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-20deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(90deg);
  }
}

.checkbox-label {
  margin-left: 1rem;
  font-size: 1.2rem;
}

<!-- No js code needed for this loader -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<div class="checkbox-group">
  <label class="checkbox-container">
    <input type="checkbox" />
    <div class="checkbox-custom"></div>
    <span class="checkbox-label">Checkbox 1</span>
  </label>
  <label class="checkbox-container">
    <input type="checkbox" />
    <div class="checkbox-custom"></div>
    <span class="checkbox-label">Checkbox 2</span>
  </label>
</div>

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: #000000;
  color: #ffffff;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.checkbox-container {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.checkbox-container input[type="checkbox"] {
  display: none;
}

.checkbox-custom {
  width: 2.5rem;
  height: 2.5rem;
  border: 0.2rem solid #ffffff;
  border-radius: 0.5rem;
  position: relative;
  transition: all 0.3s ease;
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom {
  background: #ff5722;
  animation: pulse 0.5s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 87, 34, 0.5);
  }
  100% {
    box-shadow: 0 0 0 1rem rgba(255, 87, 34, 0);
  }
}

.checkbox-label {
  margin-left: 1rem;
  font-size: 1.2rem;
}

<!-- No js code needed for this loader -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<label class="checkbox-container">
  <input type="checkbox" />
  <div class="checkbox-custom"></div>
  <span class="checkbox-label">Rotating Checkbox</span>
</label>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: linear-gradient(to bottom, #1e3c72, #2a5298);
  font-family: Arial, sans-serif;
  color: #ffffff;
}

.checkbox-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 1rem;
}

input[type="checkbox"] {
  display: none;
}

.checkbox-custom {
  width: 2.5rem;
  height: 2.5rem;
  border: 0.2rem solid #ffffff;
  border-radius: 0.5rem;
  position: relative;
  transition: transform 0.3s ease;
}

input[type="checkbox"]:checked + .checkbox-custom {
  transform: rotate(360deg);
  background: #4caf50;
}

input[type="checkbox"]:checked + .checkbox-custom::after {
  content: '✔';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  color: #ffffff;
}

.checkbox-label {
  font-size: 1.2rem;
}

<!-- No js code needed for this loader -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<label class="checkbox-container">
  <input type="checkbox" />
  <div class="checkbox-custom"></div>
  <span class="checkbox-label">Flip Animation</span>
</label>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: radial-gradient(circle, #000428, #004e92);
  font-family: Arial, sans-serif;
  color: #ffffff;
}

.checkbox-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 1rem;
}

input[type="checkbox"] {
  display: none;
}

.checkbox-custom {
  width: 3rem;
  height: 3rem;
  background: #ffffff;
  border: 0.2rem solid #ffffff;
  perspective: 1000px;
  position: relative;
  transition: transform 0.4s;
}

input[type="checkbox"]:checked + .checkbox-custom {
  transform: rotateY(360deg);
  background: #ff6b6b;
  border-radius: 10%;
}

input[type="checkbox"]:checked + .checkbox-custom::after {
  content: '✔';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  color: #ffffff;
}

.checkbox-label {
  font-size: 1.2rem;
}

<!-- No js code needed for this loader -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<label class="checkbox-container">
  <input type="checkbox" />
  <div class="checkbox-custom"></div>
  <span class="checkbox-label">Glowing Checkbox</span>
</label>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: linear-gradient(45deg, #141e30, #243b55);
  font-family: Arial, sans-serif;
  color: #ffffff;
}

.checkbox-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 1rem;
}

input[type="checkbox"] {
  display: none;
}

.checkbox-custom {
  width: 3rem;
  height: 3rem;
  border: 0.2rem solid #ffffff;
  background: #1f1f1f;
  border-radius: 0.5rem;
  position: relative;
  box-shadow: 0 0 0.5rem rgba(255, 255, 255, 0);
  transition: box-shadow 0.3s ease;
}

input[type="checkbox"]:checked + .checkbox-custom {
  box-shadow: 0 0 2rem rgba(0, 176, 255, 0.9);
  background: #00bfff;
}

input[type="checkbox"]:checked + .checkbox-custom::after {
  content: '✔';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  color: #ffffff;
}


.checkbox-label {
  font-size: 1.2rem;
}

<!-- No js code needed for this loader -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<label class="checkbox-container" aria-label="Bouncing Checkbox">
  <input type="checkbox" />
  <div class="checkbox-custom"></div>
  <span class="checkbox-label">Bouncing Checkbox</span>
</label>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: #000000;
  font-family: Arial, sans-serif;
  color: #ffffff;
}

.checkbox-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 1rem;
}

input[type="checkbox"] {
  display: none;
}

.checkbox-custom {
  width: 3rem;
  height: 3rem;
  background: #1f1f1f;
  border: 0.2rem solid #ffffff;
  border-radius: 0.5rem; /* Rounded corners */
  position: relative;
  transition: all 0.3s ease; /* Smooth transition for all properties */
}

/* Hover Effect */
.checkbox-container:hover .checkbox-custom {
  transform: scale(1.1); /* Slightly enlarge on hover */
  box-shadow: 0 0 1rem rgba(255, 255, 255, 0.5); /* Glow effect on hover */
}

/* Checked State */
input[type="checkbox"]:checked + .checkbox-custom {
  animation: bounce 0.5s;
  background: #76ff03;
  border: 0.2rem solid #76ff03;
  box-shadow: 0 0 2rem rgba(118, 255, 3, 0.8); /* Glow effect on check */
}

/* Bounce Animation */
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px); /* Higher bounce */
  }
  100% {
    transform: translateY(0);
  }
}

.checkbox-label {
  font-size: 1.2rem;
  user-select: none; /* Prevent text selection */
}

<!-- No js code needed for this loader -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<div class="checkbox-container">
  <div class="checkbox-label">Choose Options:</div>

  <div class="firstrow">
      <!-- Option 1 -->
  <label class="checkbox-option">
      <input type="checkbox" onchange="toggleFill(this)">
      <div class="fill"></div>
      <span>1</span>
    </label>

    <!-- Option 2 -->
    <label class="checkbox-option">
      <input type="checkbox" onchange="toggleFill(this)">
      <div class="fill"></div>
      <span>2</span>
    </label>
  </div>

  <div class="secondrow">
      <!-- Option 3 -->
  <label class="checkbox-option">
      <input type="checkbox" onchange="toggleFill(this)">
      <div class="fill"></div>
      <span>3</span>
    </label>

    <!-- Option 4 -->
    <label class="checkbox-option">
      <input type="checkbox" onchange="toggleFill(this)">
      <div class="fill"></div>
      <span>4</span>
    </label>
  </div>
</div>

:root {
  --option-width: 3rem;
  --option-height: 3rem;
  --border-radius: 1rem;
  --active-color: linear-gradient(135deg, #00ff66, #000000, #00ff77);
  --inactive-color: #222;
  --text-color: white;
}

body {
  margin: 0;
  background: #111;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: Arial, sans-serif;
}

.checkbox-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

.firstrow {
    display: flex;
  gap: 3rem;
}

.secondrow {
    display: flex;
  gap: 3rem;
}

.checkbox-option {
  position: relative;
  width: var(--option-width);
  height: var(--option-height);
  border-radius: var(--border-radius);
  background: var(--inactive-color);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  border: 0.2rem solid #333;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
}

.checkbox-option:hover {
  border-color: #00ff91;
  box-shadow: 0 0.8rem 1.6rem rgba(76, 175, 80, 0.7);
}

.checkbox-option input {
  display: none;
}

.checkbox-option .fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: var(--active-color);
  z-index: 1;
  transition: width 0.3s ease-in-out;
}

.checkbox-option.checked .fill {
  width: 100%;
}

.checkbox-option span {
  position: relative;
  z-index: 2;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--text-color);
  text-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.5);
}

/* Adjust for vertical layout */
.checkbox-label {
  font-size: 1.7rem;
  color: var(--text-color);
  margin-bottom: 1rem;
}

function toggleFill(checkbox) {
  const option = checkbox.closest('.checkbox-option');
  if (checkbox.checked) {
    option.classList.add('checked');
  } else {
    option.classList.remove('checked');
  }
}

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<div class="progress-container">
  <div class="checkbox-label">Select Your Options:</div>

  <!-- Progress Bar -->
  <div class="progress-bar" id="progressBar">
    <div class="progress-segment" data-index="1">1</div>
    <div class="progress-segment" data-index="2">2</div>
    <div class="progress-segment" data-index="3">3</div>
    <div class="progress-segment" data-index="4">4</div>
  </div>
</div>

:root {
  --bar-width: 3rem;
  --bar-height: 12rem;
  --segment-height: 3rem;
  --bar-bg: #222;
  --bar-border: #555;
  --segment-active: linear-gradient(45deg, #4CAF50, #00FF99);
  --segment-inactive: #333;
  --glow-color: #4CAF50;
  --text-color: white;
}

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #111;
  font-family: Arial, sans-serif;
}

.progress-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
}

.progress-bar {
  width: var(--bar-width);
  height: var(--bar-height);
  background: var(--bar-bg);
  border: 0.2rem solid var(--bar-border);
  border-radius: 1rem;
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
}

.progress-segment {
  height: var(--segment-height);
  background: var(--segment-inactive);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color);
  font-size: 1rem;
  font-weight: bold;
  transition: background 0.3s ease, transform 0.3s ease;
}

.progress-segment.active {
  background: var(--segment-active);
  transform: scale(1.1);
  box-shadow: 0 0.5rem 1rem var(--glow-color);
}

.checkbox-label {
  font-size: 1.2rem;
  color: var(--text-color);
}

.hidden-checkbox {
  display: none;
}

document.querySelectorAll(".progress-segment").forEach((segment) => {
  segment.addEventListener("click", () => {
    segment.classList.toggle("active");

    // Handle any additional functionality (e.g., checkbox-like behavior)
    updateProgress(segment);
  });
});

function updateProgress(segment) {
  const allSegments = Array.from(document.querySelectorAll(".progress-segment"));
  const activeSegments = allSegments.filter(seg => seg.classList.contains("active"));

  console.log(`You selected: ${activeSegments.map(seg => seg.dataset.index).join(", ")}`);
}

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<div class="dial-container">
  <div class="dial">
    <div class="side front">
      <input type="checkbox" id="option1" />
      <label for="option1">Option 1</label>
    </div>
    <div class="side left">
      <input type="checkbox" id="option4" />
      <label for="option4">Option 2</label>
    </div>
    
    <div class="side back">
      <input type="checkbox" id="option3" />
      <label for="option3">Option 3</label>
    </div>
   <div class="side right">
      <input type="checkbox" id="option2" />
      <label for="option2">Option 4</label>
    </div>
    <div class="side top">
      <input type="checkbox" id="option5" />
      <label for="option5">Option 5</label>
    </div>
    <div class="side bottom">
      <input type="checkbox" id="option6" />
      <label for="option6">Option 6</label>
    </div>
  </div>

  <button class="prev">Previous</button>
  <button class="next">Next</button>
</div>

:root {
  --dial-size: 250px;
  --active-color: #f43676;
  --inactive-color: #2f2f2f;
  --hover-color: #ff80ab;
  --box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #1a1a1a;
  font-family: 'Arial', sans-serif;
  color: #fff;
}

.dial-container {
  position: relative;
  perspective: 1000px;
}

.dial {
  width: var(--dial-size);
  height: var(--dial-size);
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg);
  transition: transform 1s ease;
}

.side {
  position: absolute;
  width: var(--dial-size);
  height: var(--dial-size);
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--inactive-color);
  border-radius: 15px;
  box-shadow: var(--box-shadow);
  font-size: 1.5rem;
  font-weight: 500;
  color: #e0e0e0;
  transition: background 0.3s, transform 0.3s ease;
}

input[type="checkbox"] {
  display: none;
}

label {
  cursor: pointer;
  color: #e0e0e0;
  text-align: center;
  transition: color 0.3s, transform 0.3s ease;
}

input[type="checkbox"]:checked + label {
  color: #fff;
  text-shadow: 0 0 15px var(--active-color);
}

input[type="checkbox"]:checked + label {
  transform: scale(1.1);
}

.front {
transform: translateZ(calc(var(--dial-size) / 2));
background: linear-gradient(45deg, #ff005d, #000000, #ff0055); /* Diagonal gradient */
border-radius: 10px;
color: #1a1a1a;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.right {
transform: rotateY(90deg) translateZ(calc(var(--dial-size) / 2));
background: linear-gradient(135deg, #00eeff, #000000, #00fff2); /* Diagonal gradient */
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.back {
transform: rotateY(180deg) translateZ(calc(var(--dial-size) / 2));
background: linear-gradient(45deg, #ff5500, #000000, #ff6f00); /* Diagonal gradient */
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.left {
transform: rotateY(-90deg) translateZ(calc(var(--dial-size) / 2));
background: linear-gradient(135deg, #000000, #ff5800, #371d1d); /* Diagonal gradient */
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.top {
transform: rotateX(90deg) translateZ(calc(var(--dial-size) / 2));
background: linear-gradient(45deg, #77ff77, #4cbb17); /* Diagonal gradient */
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.bottom {
transform: rotateX(-90deg) translateZ(calc(var(--dial-size) / 2));
background: linear-gradient(135deg, #5a5a5a, #404040); /* Diagonal gradient */
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}


button {
  position: absolute;
  top: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  padding: 12px 25px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 1rem;
  transition: background-color 0.3s ease;
  opacity: 0.9;
}

button:hover {
  background-color: var(--hover-color);
  opacity: 1;
}

.prev {
  left: 20px;
}

.next {
  right: 20px;
}

function initializeLoader() {
  let currentRotation = 0;

  document.querySelector('.prev').addEventListener('click', () => {
      currentRotation -= 90;
      rotateDial(currentRotation);
  });

  document.querySelector('.next').addEventListener('click', () => {
      currentRotation += 90;
      rotateDial(currentRotation);
  });

  function rotateDial(rotation) {
      const dial = document.querySelector('.dial');
      dial.style.transform = `rotateY(${rotation}deg)`;
  }

}

// Call the function to initialize the toggle
initializeLoader();

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<label class="checkbox-container">
  <input type="checkbox" />
  <div class="checkbox-custom"></div>
  <span class="checkbox-label">Tick Animation Checkbox</span>
</label>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: linear-gradient(135deg, #ff9a8b, #ff6a88, #ff99ac);
  font-family: Arial, sans-serif;
  color: #ffffff;
}

.checkbox-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
}

input[type="checkbox"] {
  display: none;
}

.checkbox-custom {
  width: 3rem;
  height: 3rem;
  border: 0.3rem solid #ffffff;
  border-radius: 5px;
  position: relative;
  transition: background 0.3s ease;
}

input[type="checkbox"]:checked + .checkbox-custom {
  background: #4caf50;
}

.checkbox-custom::after {
  content: '';
  width: 0;
  height: 0.2rem;
  background: transparent;
  border: solid #ffffff;
  border-width: 0 0.2rem 0.2rem 0;
  position: absolute;
  top: 0.9rem;
  left: 1rem;
  transform: rotate(90deg);
  transition: width 0.3s ease, height 0.3s ease;
}

input[type="checkbox"]:checked + .checkbox-custom::after {
  width: 1rem;
  height: 0.5rem;
}

.checkbox-label {
  font-size: 1.2rem;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="checkbox-container">
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1" class="checkbox-custom"></label>
  <label for="checkbox1" class="checkbox-label">Enable Feature</label>
</div>

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
  font-family: 'Arial', sans-serif;
}

.checkbox-container {
  display: flex;
  align-items: center;
}

.checkbox-container input[type="checkbox"] {
  display: none;
}

.checkbox-custom {
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 2px solid #007bff;
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}

.checkbox-custom::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 6px;
  border: 2px solid #007bff;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
  opacity: 0;
  transition: all 0.3s ease;
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom {
  background-color: #007bff;
  border-color: #007bff;
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom::before {
  opacity: 1;
  border-color: #fff;
}

.checkbox-label {
  margin-left: 10px;
  font-size: 16px;
  color: #333;
  cursor: pointer;
  transition: color 0.3s ease;
}

.checkbox-container input[type="checkbox"]:focus + .checkbox-custom {
  border-color: #0056b3;
}

.checkbox-container input[type="checkbox"]:focus + .checkbox-custom::before {
  border-color: #0056b3;
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom:hover {
  background-color: #0056b3;
}

.checkbox-container input[type="checkbox"]:focus + .checkbox-label {
  color: #0056b3;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="checkbox-container">
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1" class="checkbox-custom"></label>
  <label for="checkbox1" class="checkbox-label">Enable Feature</label>
</div>

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #121212;
  font-family: 'Arial Black', sans-serif;
  color: #fff;
}

.checkbox-container {
  display: flex;
  align-items: center;
}

.checkbox-container input[type="checkbox"] {
  display: none;
}

.checkbox-custom {
  width: 30px;
  height: 30px;
  background-color: #1a1a1a;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  transition: all 0.4s ease;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}

.checkbox-custom::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  background-color: #ff00ff;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: all 0.4s ease;
  box-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom::before {
  transform: translate(-50%, -50%) scale(1);
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom {
  background-color: #ff00ff;
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.8), 0 0 40px rgba(255, 0, 255, 0.5);
}

.checkbox-container input[type="checkbox"]:focus + .checkbox-custom {
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.8), 0 0 40px rgba(255, 0, 255, 0.5), 0 0 60px rgba(255, 0, 255, 0.3);
}

.checkbox-label {
  margin-left: 15px;
  font-size: 18px;
  color: #ff00ff;
  cursor: pointer;
  transition: color 0.4s ease;
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom + .checkbox-label {
  color: #00ff00;
}

.checkbox-container input[type="checkbox"]:focus + .checkbox-custom + .checkbox-label {
  color: #ff00ff;
  text-shadow: 0 0 10px rgba(255, 0, 255, 0.8), 0 0 20px rgba(255, 0, 255, 0.5);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="checkbox-container">
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1" class="checkbox-custom"></label>
  <label for="checkbox1" class="checkbox-label">Enable Feature</label>
</div>

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #000000;
  font-family: 'Courier New', monospace;
  color: #fff;
}

.checkbox-container {
  display: flex;
  align-items: center;
}

.checkbox-container input[type="checkbox"] {
  display: none;
}

.checkbox-custom {
  width: 40px;
  height: 40px;
  border: 3px solid #00ffff;
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  transition: all 0.5s ease;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}



.checkbox-custom::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.1) 0%, rgba(0, 255, 255, 0.3) 100%);
  z-index: -1;
  animation: hologram 2s infinite alternate;
}

@keyframes hologram {
  0% {
      background-position: 0 0;
  }
  100% {
      background-position: 40px 40px;
  }
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom {
  background-color: #00ffff;
  border-color: #00ffff;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.5), 0 0 40px rgba(0, 255, 255, 0.3);
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom::before {
  transform: translate(-50%, -50%) rotate(-45deg) scale(1);
  border-color: #000000;
}

.checkbox-container input[type="checkbox"]:focus + .checkbox-custom {
  border-color: #00bfff;
  box-shadow: 0 0 20px rgba(0, 187, 255, 0.8), 0 0 40px rgba(0, 187, 255, 0.5);
}

.checkbox-container input[type="checkbox"]:focus + .checkbox-custom::after {
  animation: hologram 1s infinite alternate;
}

.checkbox-label {
  margin-left: 15px;
  font-size: 18px;
  color: #00ffff;
  cursor: pointer;
  transition: color 0.5s ease;
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom + .checkbox-label {
  color: #e8e4e4;
  font-weight: 900;
  border: 3px solid #00ff7b;
  padding: 0.2rem;
  text-shadow: 0 0 10px rgba(0, 255, 123, 0.8), 0 0 20px rgba(0, 255, 123, 0.5);
}

.checkbox-container input[type="checkbox"]:focus + .checkbox-custom + .checkbox-label {
  color: #00bfff;
  text-shadow: 0 0 10px rgba(0, 187, 255, 0.8), 0 0 20px rgba(0, 187, 255, 0.5);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="checkbox-container">
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1" class="checkbox-custom"></label>
  <label for="checkbox1" class="checkbox-label">Developer Mode</label>
</div>

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #000000;
  font-family: 'Courier New', monospace;
  color: #fff;
}

.checkbox-container {
  display: flex;
  align-items: center;
}

.checkbox-container input[type="checkbox"] {
  display: none;
}

.checkbox-custom {
  width: 50px;
  height: 30px;
  border: 4px solid #d4057a;
  border-radius: 15px;
  position: relative;
  cursor: pointer;
  transition: all 0.4s ease;
  box-shadow: 0 0 10px rgba(64, 224, 208, 0.3);
}

.checkbox-custom::before {
  content: '';
  position: absolute;
  top: 0px;
  left: 28px;
  width: 29px;
  height: 29px;
  background-color: hsl(333, 87%, 50%);
  border-radius: 50%;
  transform: translateX(-30px);
  transition: all 0.4s ease;
}

.checkbox-custom::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(64, 224, 208, 0.1) 0%, rgba(64, 224, 208, 0.3) 100%);
  z-index: -1;
  animation: cyberpunk-glow 2s infinite alternate;
}

@keyframes cyberpunk-glow {
  0% {
      background-position: 0 0;
  }
  100% {
      background-position: 50px 30px;
  }
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom {
  background-color: #1a1a1a;
  border-color: #ff4500;
  box-shadow: 0 0 20px rgba(255, 69, 0, 0.5), 0 0 40px rgba(255, 69, 0, 0.3);
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom::before {
  transform: translateX(-5px);
  border-radius: 5px;
  background-color: #ff4500;
}

.checkbox-container input[type="checkbox"]:focus + .checkbox-custom {
  border-color: #ff6347;
  box-shadow: 0 0 20px rgba(255, 99, 71, 0.8), 0 0 40px rgba(255, 99, 71, 0.5);
}

.checkbox-container input[type="checkbox"]:focus + .checkbox-custom::after {
  animation: cyberpunk-glow 1s infinite alternate;
}

.checkbox-label {
  margin-left: 15px;
  font-size: 18px;
  color: #ec0885;
  cursor: pointer;
  transition: color 0.4s ease;
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom + .checkbox-label {
  color: #ff4500;
}

.checkbox-container input[type="checkbox"]:focus + .checkbox-custom + .checkbox-label {
  color: #ff6347;
  text-shadow: 0 0 10px rgba(255, 99, 71, 0.8), 0 0 20px rgba(255, 99, 71, 0.5);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <div class="checkbox-container">
    <input type="checkbox" id="checkbox1">
    <label for="checkbox1" class="checkbox-custom"></label>
  </div>

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #000000;
  font-family: 'Courier New', monospace;
  color: #fff;
}

.checkbox-container {
  display: flex;
  align-items: center;
}

.checkbox-container input[type="checkbox"] {
  display: none;
}

.checkbox-custom {
  width: 50px;
  height: 50px;
  border: 4px solid #00ffff;
  border-radius: 10%;
  position: relative;
  cursor: pointer;
  transition: all 0.4s ease;
}


.checkbox-container input[type="checkbox"]:checked + .checkbox-custom {
  background-color: #1a1a1a;
  border-color: #ff69b4;
  box-shadow: 0 0 20px rgba(255, 105, 180, 0.5), 0 0 40px rgba(255, 105, 180, 0.3);
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom::before {
  transform: translate(-50%, -50%) scale(1);
  color: #ff69b4;
  animation: bellVibrate 1.5s ease-in-out infinite;
}

@keyframes bellVibrate {
  0% {
      transform: translate(-50%, -50%) scale(1);
  }
  50% {
      transform: translate(-50%, -50%) scale(1.2);
  }
  100% {
      transform: translate(-50%, -50%) scale(1);
  }
}


.checkbox-custom::before {
  content: '\f0f3'; /* Bell icon from Font Awesome */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: all 0.4s ease;
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: #00ffff;
  font-size: 24px;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<div class="checkbox-container">
    <input type="checkbox" id="checkbox1">
    <label for="checkbox1" class="checkbox-custom"></label>
    <label for="checkbox1" class="checkbox-label">Notify Me</label>
</div>

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
  font-family: 'Arial Black', sans-serif;
  color: #333;
}

.checkbox-container {
  display: flex;
  align-items: center;
}

.checkbox-container input[type="checkbox"] {
  display: none;
}

.checkbox-custom {
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 15px;
  position: relative;
  cursor: pointer;
  transition: all 0.4s ease;
  box-shadow: 
      12px 12px 24px #bebebe, 
      -12px -12px 24px #ffffff;
}

.checkbox-custom::before {
  content: '\f00c'; /* Checkmark icon from Font Awesome */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: all 0.4s ease;
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: #32cd32;
  font-size: 24px;
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom {
  background-color: #fff;
  box-shadow: 
      inset 12px 12px 24px #bebebe, 
      inset -12px -12px 24px #ffffff;
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom::before {
  transform: translate(-50%, -50%) scale(1);
}

.checkbox-container input[type="checkbox"]:focus + .checkbox-custom {
  box-shadow: 
      12px 12px 24px #bebebe, 
      -12px -12px 24px #ffffff, 
      0 0 10px rgba(50, 205, 50, 0.5);
}

.checkbox-container input[type="checkbox"]:focus + .checkbox-custom::before {
  color: #2e8b57;
}

.checkbox-label {
  margin-left: 15px;
  font-size: 18px;
  color: #32cd32;
  cursor: pointer;
  transition: color 0.4s ease;
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom + .checkbox-label {
  color: #2e8b57;
}

.checkbox-container input[type="checkbox"]:focus + .checkbox-custom + .checkbox-label {
  color: #2e8b57;
  text-shadow: 0 0 10px rgba(50, 205, 50, 0.5);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<div class="checkbox-container">
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1" class="checkbox-custom"></label>
</div>

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #121212;
  font-family: 'Courier New', monospace;
  color: #fff;
}

.checkbox-container {
  display: flex;
  align-items: center;
}

.checkbox-container input[type="checkbox"] {
  display: none;
}

.checkbox-custom {
  width: 50px;
  height: 50px;
  background-color: #1a1a1a;
  border: 4px solid #00ffff;
  border-radius: 15px;
  position: relative;
  cursor: pointer;
  transition: all 0.4s ease;
  box-shadow: 
      12px 12px 24px rgba(0, 255, 255, 0.3), 
      -12px -12px 24px rgba(0, 0, 0, 0.3);
}

.checkbox-custom::before {
  content: '\f714'; /* Bell icon from Font Awesome */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: all 0.4s ease;
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: #00ffff;
  font-size: 24px;
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom {
  background-color: #1a1a1a;
  border-color: #7f0000;
  box-shadow: 
      inset 12px 12px 24px rgba(255, 105, 180, 0.3), 
      inset -12px -12px 24px rgba(0, 0, 0, 0.3);
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom::before {
  transform: translate(-50%, -50%) scale(1);
  color: #c8c3c3;
}

.checkbox-container input[type="checkbox"]:focus + .checkbox-custom {
  border-color: #ff1493;
  box-shadow: 
      12px 12px 24px rgba(147, 2, 2, 0.3), 
      -12px -12px 24px rgba(0, 0, 0, 0.3), 
      0 0 10px rgba(210, 2, 2, 0.5);
}

.checkbox-container input[type="checkbox"]:focus + .checkbox-custom::before {
  color: #ff1493;
}

.checkbox-label {
  margin-left: 15px;
  font-size: 18px;
  color: #00ffff;
  cursor: pointer;
  transition: color 0.4s ease;
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom + .checkbox-label {
  color: #ff69b4;
}

.checkbox-container input[type="checkbox"]:focus + .checkbox-custom + .checkbox-label {
  color: #ff1493;
  text-shadow: 0 0 10px rgba(255, 20, 147, 0.8), 0 0 20px rgba(255, 20, 147, 0.5);
}

@keyframes neon-glow {
  0%, 100% {
      box-shadow: 
          12px 12px 24px rgba(0, 255, 255, 0.3), 
          -12px -12px 24px rgba(0, 0, 0, 0.3);
  }
  50% {
      box-shadow: 
          12px 12px 24px rgba(146, 1, 1, 0.3), 
          -12px -12px 24px rgba(0, 0, 0, 0.3), 
          0 0 20px rgba(124, 0, 0, 0.8), 
          0 0 40px rgba(255, 20, 147, 0.5);
  }
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom {
  animation: neon-glow 2s ease-in-out infinite;
}

.checkbox-container input[type="checkbox"]:focus + .checkbox-custom {
  animation: neon-glow 2s ease-in-out infinite;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<div class="checkbox-container">
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1" class="checkbox-custom"></label>
  <label for="checkbox1" class="checkbox-label">Toggle Sound</label>
</div>

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #121212;
  font-family: 'Courier New', monospace;
  color: #fff;
}

.checkbox-container {
  display: flex;
  align-items: center;
}

.checkbox-container input[type="checkbox"] {
  display: none;
}

.checkbox-custom {
  width: 50px;
  height: 50px;
  background-color: #1a1a1a;
  border: 4px solid #00ffff;
  border-radius: 15px;
  position: relative;
  cursor: pointer;
  transition: all 0.4s ease;
  box-shadow: 
      12px 12px 24px rgba(0, 255, 255, 0.3), 
      -12px -12px 24px rgba(0, 0, 0, 0.3);
}

.checkbox-custom::before {
  content: '\f028'; /* Sound icon from Font Awesome */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: #00ffff;
  font-size: 24px;
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom {
  background-color: #1a1a1a;
  border-color: #ff69b4;
  box-shadow: 
      inset 12px 12px 24px rgba(255, 105, 180, 0.3), 
      inset -12px -12px 24px rgba(0, 0, 0, 0.3);
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom::before {
  content: '\f026'; /* Mute icon from Font Awesome */
  color: #ff69b4;
}

.checkbox-container input[type="checkbox"]:focus + .checkbox-custom {
  border-color: #ff1493;
  box-shadow: 
      12px 12px 24px rgba(255, 20, 147, 0.3), 
      -12px -12px 24px rgba(0, 0, 0, 0.3), 
      0 0 10px rgba(255, 20, 147, 0.5);
}

.checkbox-container input[type="checkbox"]:focus + .checkbox-custom::before {
  color: #ff1493;
}

.checkbox-label {
  margin-left: 15px;
  font-size: 18px;
  color: #00ffff;
  cursor: pointer;
  transition: color 0.4s ease;
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom + .checkbox-label {
  color: #ff69b4;
}

.checkbox-container input[type="checkbox"]:focus + .checkbox-custom + .checkbox-label {
  color: #ff1493;
  text-shadow: 0 0 10px rgba(255, 20, 147, 0.8), 0 0 20px rgba(255, 20, 147, 0.5);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<div class="checkbox-container">
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1" class="checkbox-custom"></label>
</div>

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #121212;
  font-family: 'Courier New', monospace;
  color: #fff;
}

.checkbox-container {
  display: flex;
  align-items: center;
}

.checkbox-container input[type="checkbox"] {
  display: none;
}

.checkbox-custom {
  width: 50px;
  height: 50px;
  background-color: #1a1a1a;
  border: 4px solid #ff006a;
  border-radius: 55px;
  position: relative;
  cursor: pointer;
  transition: all 0.4s ease;
  box-shadow: 
      12px 12px 24px rgba(0, 255, 255, 0.3), 
      -12px -12px 24px rgba(0, 0, 0, 0.3);
}

.checkbox-custom::before {
content: '\f04b'; /* Play icon from Font Awesome */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.4s ease;
font-family: 'Font Awesome 6 Free';
font-weight: 900;
color: #ff006a;
font-size: 24px;
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom::before {
content: '\f04c'; /* Pause icon from Font Awesome */
color: #656163;
}


.checkbox-container input[type="checkbox"]:checked + .checkbox-custom {
  background-color: #1a1a1a;
  border-color: #ff69b4;
  box-shadow: 
      inset 12px 12px 24px rgba(255, 105, 180, 0.3), 
      inset -12px -12px 24px rgba(0, 0, 0, 0.3);
}



.checkbox-container input[type="checkbox"]:focus + .checkbox-custom {
  border-color: #ff1493;
  box-shadow: 
      12px 12px 24px rgba(255, 20, 147, 0.3), 
      -12px -12px 24px rgba(0, 0, 0, 0.3), 
      0 0 10px rgba(255, 20, 147, 0.5);
}

.checkbox-container input[type="checkbox"]:focus + .checkbox-custom::before {
  color: #ff1493;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<div class="checkbox-container">
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1" class="checkbox-custom"></label>
</div>

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #121212;
  font-family: 'Courier New', monospace;
  color: #fff;
}

.checkbox-container {
  display: flex;
  align-items: center;
}

.checkbox-container input[type="checkbox"] {
  display: none;
}

.checkbox-custom {
  width: 80px;
  height: 50px;
  background: radial-gradient(circle, #ffffff, #000000);
  border-radius: 55px;
  position: relative;
  cursor: pointer;
  transition: all 0.4s ease;
}

.checkbox-custom::before {
  content: '\f096'; /* Square icon from Font Awesome */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: #ff006a;
  font-size: 24px;
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom {
  background: linear-gradient(135deg, #ff0000, #ffb269);
  border-color: #ff69b4;
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom::before {
  content: '\f04c'; /* Pause icon from Font Awesome */
  color: #656163;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<div class="checkbox-container">
  <input type="checkbox" id="checkbox2">
  <label for="checkbox2" class="checkbox-custom"></label>
</div>

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #edecec;
  font-family: 'Courier New', monospace;
  color: #fff;
}

.checkbox-container {
  display: flex;
  align-items: center;
}

.checkbox-container input[type="checkbox"] {
  display: none;
}

.checkbox-custom {
  width: 50px;
  height: 50px;
  background-color: #1a1a1a;
  border: 4px solid #ff006a;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  transition: all 0.4s ease;
  box-shadow: 
      12px 12px 24px rgba(0, 255, 255, 0.3), 
      -12px -12px 24px rgba(0, 0, 0, 0.3);
}

.checkbox-custom::before {
  content: '\2212'; /* Minus icon */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
  color: #ff006a;
  font-size: 32px;
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom {
  background-color: #ffffff;
  border-color: #ff1493;
  border-radius: 10%;
  box-shadow: 
      0 0 20px rgba(255, 20, 147, 0.5),
      12px 12px 24px rgba(255, 105, 180, 0.3), 
      -12px -12px 24px rgba(0, 0, 0, 0.3);
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom::before {
  content: '+';
  color: #ff1493;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<div class="checkbox-container">
  <input type="checkbox" id="checkbox3">
  <label for="checkbox3" class="checkbox-custom"></label>
</div>

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #121212;
  font-family: 'Courier New', monospace;
  color: #fff;
}

.checkbox-container {
  display: flex;
  align-items: center;
}

.checkbox-container input[type="checkbox"] {
  display: none;
}

.checkbox-custom {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  transition: all 0.4s ease;
}

.checkbox-custom::before {
  content: '\25B6'; /* Play icon */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
  color: #09ff80;
  font-size: 24px;
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom {
  width: 70px;
  height: 70px;
  border: 4px double rgb(69, 255, 150);
  border-radius: 15px;
  box-shadow: 
      12px 12px 24px rgba(20, 255, 118, 0.3), 
      -12px -12px 24px rgba(0, 0, 0, 0.3);
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom::before {
  content: '\25FC'; /* Square icon */
  color: #14ff91;
  font-size: 32px;
  transform: translate(-50%, -50%) rotate(45deg);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<div class="checkbox-container">
  <input type="checkbox" id="checkbox2">
  <label for="checkbox2" class="checkbox-custom"></label>
</div>

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #121212;
  font-family: 'Courier New', monospace;
  color: #fff;
}

.checkbox-container {
  display: flex;
  align-items: center;
}

.checkbox-container input[type="checkbox"] {
  display: none;
}

.checkbox-custom {
  width: 50px;
  height: 50px;
  background-color: #1a1a1a;
  border: 4px solid #ffcc00;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  transition: all 0.4s ease;
  box-shadow: 
      12px 12px 24px rgba(255, 204, 0, 0.3), 
      -12px -12px 24px rgba(0, 0, 0, 0.3);
}

.checkbox-custom::before {
  content: '\f111'; /* Circle icon from Font Awesome */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
  color: #ffcc00;
  font-size: 24px;
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom {
  background-color: #ffcc00;
  border-color: #ff69b4;
  box-shadow: 
      0 0 20px rgba(255, 105, 180, 0.5),
      12px 12px 24px rgba(255, 105, 180, 0.3), 
      -12px -12px 24px rgba(0, 0, 0, 0.3);
  animation: rainbow-shimmer 2s infinite;
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom::before {
  content: '\f00d'; /* Check icon from Font Awesome */
  color: #ff69b4;
}

@keyframes rainbow-shimmer {
  0% { background-color: #ffcc00; }
  20% { background-color: #ff69b4; }
  40% { background-color: #6a0dad; }
  60% { background-color: #00d4ff; }
  80% { background-color: #00dbde; }
  100% { background-color: #ffcc00; }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<div class="checkbox-container">
  <input type="checkbox" id="checkbox3">
  <label for="checkbox3" class="checkbox-custom"></label>
</div>

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #121212;
  font-family: 'Courier New', monospace;
  color: #fff;
}

.checkbox-container {
  display: flex;
  align-items: center;
}

.checkbox-container input[type="checkbox"] {
  display: none;
}

.checkbox-custom {
  width: 50px;
  height: 50px;
  background-color: #1a1a1a;
  border: 4px solid #ff99cc;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  transition: all 0.4s ease;
  box-shadow: 
      12px 12px 24px rgba(255, 153, 204, 0.3), 
      -12px -12px 24px rgba(0, 0, 0, 0.3);
}

.checkbox-custom::before {
  content: '\f04b'; /* Play icon from Font Awesome */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
  color: #ff99cc;
  font-size: 24px;
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom {
  background-color: #ff99cc;
  border-color: #ff99cc;
  border-radius: 0;
  clip-path: polygon(50% 0%, 61.8% 38.2%, 100% 38.2%, 68.2% 58.2%, 79.9% 100%, 50% 71.8%, 20.1% 100%, 31.8% 58.2%, 0% 38.2%, 38.2% 38.2%);
  box-shadow: 
      12px 12px 24px rgba(255, 153, 204, 0.3), 
      -12px -12px 24px rgba(0, 0, 0, 0.3);
}

.checkbox-container input[type="checkbox"]:checked + .checkbox-custom::before {
  content: '\f00c'; /* Check icon from Font Awesome */
  color: #ff99cc;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<input id="inpLock" type="checkbox">
<label class="btn-lock" for="inpLock">
    <svg width="36" height="40" viewBox="0 0 36 40">
        <path class="lockb" d="M27 27C27 34.1797 21.1797 40 14 40C6.8203 40 1 34.1797 1 27C1 19.8203 6.8203 14 14 14C21.1797 14 27 19.8203 27 27ZM15.6298 26.5191C16.4544 25.9845 17 25.056 17 24C17 22.3431 15.6569 21 14 21C12.3431 21 11 22.3431 11 24C11 25.056 11.5456 25.9845 12.3702 26.5191L11 32H17L15.6298 26.5191Z"></path>
        <path class="lock" d="M6 21V10C6 5.58172 9.58172 2 14 2V2C18.4183 2 22 5.58172 22 10V21"></path>
        <path class="bling" d="M29 20L31 22"></path>
        <path class="bling" d="M31.5 15H34.5"></path>
        <path class="bling" d="M29 10L31 8"></path>
    </svg>
</label>

body{
  background: #000000;
}
.btn-lock {
  position: absolute;
  top: calc(50% - 32px);
  left: calc(50% - 32px);
  display: inline-block;
  background: #19ff9b;
  width: 64px;
  height: 64px;
  box-sizing: border-box;
  padding: 12px 0 0 18px;
  border-radius: 10%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.btn-lock svg {
  fill: none;
  transform: translate3d(0, 0, 0);
}

.btn-lock svg .bling {
  stroke: #000000;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 3;
  stroke-dashoffset: 15;
  transition: all 0.3s ease;
}

.btn-lock svg .lock {
  stroke: #000000;
  stroke-width: 4;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 36;
  transition: all 0.4s ease;
}

.btn-lock svg .lockb {
  fill: #000000;
  fill-rule: evenodd;
  clip-rule: evenodd;
  transform: rotate(8deg);
  transform-origin: 14px 20px;
  transition: all 0.2s ease;
}

#inpLock {
  display: none;
}

#inpLock:checked + label {
  background: #ff1f87;
  border-radius: 50%;
  border: 1px solid rgb(10, 255, 92);
  box-shadow: 0 0 20px rgba(52, 211, 153, 0.5);
}

#inpLock:checked + label svg .bling {
  animation: bling-glow 0.3s linear forwards;
  animation-delay: 0.2s;
}

#inpLock:checked + label svg .lock {
  stroke-dasharray: 48;
  animation: glow-lock 0.3s linear forwards;
}

#inpLock:checked + label svg .lockb {
  transform: rotate(0);
  transform-origin: 14px 22px;
}

@keyframes bling-glow {
  50% {
      stroke: #fff;
      stroke-dasharray: 3;
      stroke-dashoffset: 12;
  }

  100% {
      stroke: #fff;
      stroke-dasharray: 3;
      stroke-dashoffset: 9;
  }
}

@keyframes glow-lock {
  50% {
      stroke: #d6cfcf;
      transform: translateY(1px);
  }

  100% {
      stroke: #000000;
      transform: translateY(0);
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="checkbox-wrapper-16">
  <label class="checkbox-wrapper">
      <input type="checkbox" class="checkbox-input" />
      <span class="checkbox-tile">
          <span class="checkbox-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256">
                  <rect width="256" height="256" fill="none"></rect>
                  <polygon points="72 40 184 40 240 104 128 224 16 104 72 40" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></polygon>
                  <polygon points="177.091 104 128 224 78.909 104 128 40 177.091 104" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></polygon>
                  <line x1="16" y1="104" x2="240" y2="104" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line>
              </svg>
          </span>
          <span class="checkbox-label">Diamond</span>
      </span>
  </label>
</div>

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #121212;
  font-family: 'Courier New', monospace;
  color: #fff;
}

.checkbox-wrapper-16 *,
.checkbox-wrapper-16 *:after,
.checkbox-wrapper-16 *:before {
  box-sizing: border-box;
}

.checkbox-wrapper-16 .checkbox-input {
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(100%);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile {
  border-color: #ff5722;
  box-shadow: 0 0 20px rgba(255, 87, 34, 0.5), 0 0 40px rgba(255, 87, 34, 0.3);
  color: #ff5722;
  transform: scale(1.1);
}

.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile:before {
  transform: scale(1);
  opacity: 1;
  background-color: #ff5722;
  border-color: #ff5722;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23FFFFFF' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolyline points='216 72.005 104 184 48 128.005' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'%3E%3C/polyline%3E%3C/svg%3E");
}

.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile .checkbox-icon,
.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile .checkbox-label {
  color: #ff5722;
}

.checkbox-wrapper-16 .checkbox-input:focus + .checkbox-tile {
  border-color: #ff5722;
  box-shadow: 0 0 20px rgba(255, 87, 34, 0.5), 0 0 40px rgba(255, 87, 34, 0.3), 0 0 0 4px #ffccbc;
}

.checkbox-wrapper-16 .checkbox-input:focus + .checkbox-tile:before {
  transform: scale(1);
  opacity: 1;
}

.checkbox-wrapper-16 .checkbox-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 7rem;
  min-height: 7rem;
  border-radius: 0.5rem;
  border: 2px solid #ffccbc;
  background-color: #fff;
  box-shadow: 0 0 20px rgba(255, 204, 188, 0.2);
  transition: 0.3s ease;
  cursor: pointer;
  position: relative;
}

.checkbox-wrapper-16 .checkbox-tile:before {
  content: "";
  position: absolute;
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid #ffccbc;
  background-color: #fff;
  border-radius: 50%;
  top: 0.25rem;
  left: 0.25rem;
  opacity: 0;
  transform: scale(0);
  transition: 0.3s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23FFFFFF' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolyline points='216 72.005 104 184 48 128.005' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.checkbox-wrapper-16 .checkbox-tile:hover {
  border-color: #ff5722;
  box-shadow: 0 0 20px rgba(255, 87, 34, 0.5), 0 0 40px rgba(255, 87, 34, 0.3);
}

.checkbox-wrapper-16 .checkbox-tile:hover:before {
  transform: scale(1);
  opacity: 1;
}

.checkbox-wrapper-16 .checkbox-icon {
  transition: 0.3s ease;
  color: #795548;
}

.checkbox-wrapper-16 .checkbox-icon svg {
  width: 3rem;
  height: 3rem;
}

.checkbox-wrapper-16 .checkbox-label {
  color: #6d4c41;
  transition: 0.3s ease;
  text-align: center;
  margin-top: 0.5rem;
  font-size: 1.2rem;
}

/* Dynamic Glow Effect */
.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile {
  animation: glow-effect 0.5s infinite alternate;
}

@keyframes glow-effect {
  0% {
      box-shadow: 0 0 20px rgba(255, 87, 34, 0.5), 0 0 40px rgba(255, 87, 34, 0.3);
  }
  100% {
      box-shadow: 0 0 40px rgba(255, 87, 34, 0.7), 0 0 80px rgba(255, 87, 34, 0.5);
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="checkbox-wrapper">
  <label>
      <input type="checkbox" class="checkbox-input" />
      <span class="checkbox-tile">
          <span class="checkbox-icon">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.27 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"></path>
              </svg>
          </span>
          <span class="checkbox-label">Star</span>
      </span>
  </label>
</div>

<div class="checkbox-wrapper">
  <label>
      <input type="checkbox" class="checkbox-input" />
      <span class="checkbox-tile secondary">
          <span class="checkbox-icon secondary">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M12 2C10.895 2 10 2.895 10 4s.895 2 2 2 2-.895 2-2-.895-2-2-2zm0 3.6c-.881 0-1.6-.719-1.6-1.6S11.119 2.4 12 2.4s1.6.719 1.6 1.6S12.881 5.6 12 5.6zM12 22C7.029 22 2.99 18.134 3 13.103 3.005 10.075 5.473 7.7 8.507 8.5c.768-1.275 2.127-2.25 3.743-2.25 1.615 0 2.976.975 3.744 2.25 3.033-.8 5.502 1.575 5.507 4.603C21.01 18.134 16.971 22 12 22zm0-15.45c-.928 0-1.682.755-1.682 1.682 0 .927.755 1.682 1.682 1.682.927 0 1.682-.755 1.682-1.682 0-.927-.755-1.682-1.682-1.682z"></path>
              </svg>
          </span>
          <span class="checkbox-label">Pin</span>
      </span>
  </label>
</div>

body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
height: 100vh;
background-color: #1a1a1a;
font-family: 'Arial', sans-serif;
color: #fff;
}

.checkbox-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}

.checkbox-input {
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}

.checkbox-tile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 7rem;
height: 7rem;
border-radius: 0.5rem;
border: 2px solid #90caf9;
background-color: #fff;
box-shadow: 0 0 20px rgba(144, 202, 249, 0.3);
transition: all 0.4s ease;
cursor: pointer;
position: relative;
}

.checkbox-tile:before {
content: "";
position: absolute;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
top: 0.25rem;
left: 0.25rem;
background-color: #bbdefb;
opacity: 0;
transform: scale(0);
transition: all 0.4s ease;
}

.checkbox-input:checked + .checkbox-tile {
border-color: #2196f3;
background-color: #e3f2fd;
box-shadow: 0 0 30px rgba(33, 150, 243, 0.5), 0 0 60px rgba(33, 150, 243, 0.3);
transform: scale(1.1);
}

.checkbox-input:checked + .checkbox-tile:before {
opacity: 1;
transform: scale(1);
}

.checkbox-input:checked + .checkbox-tile .checkbox-icon,
.checkbox-input:checked + .checkbox-tile .checkbox-label {
color: #2196f3;
}

.checkbox-tile:hover {
transform: scale(1.05);
border-color: #64b5f6;
box-shadow: 0 0 40px rgba(144, 202, 249, 0.6);
}

.checkbox-icon {
color: #1976d2;
transition: color 0.3s ease;
}

.checkbox-icon svg {
width: 3rem;
height: 3rem;
}

.checkbox-label {
margin-top: 0.5rem;
font-size: 1.2rem;
color: #1565c0;
transition: color 0.3s ease;
}

/* Second checkbox variations */
.checkbox-tile.secondary {
border-color: #ffab91;
box-shadow: 0 0 20px rgba(255, 171, 145, 0.3);
}

.checkbox-input:checked + .checkbox-tile.secondary {
border-color: #ff5722;
background-color: #ffe0b2;
box-shadow: 0 0 30px rgba(255, 87, 34, 0.5), 0 0 60px rgba(255, 87, 34, 0.3);
}

.checkbox-input:checked + .checkbox-tile.secondary .checkbox-icon,
.checkbox-input:checked + .checkbox-tile.secondary .checkbox-label {
color: #ff5722;
}

.checkbox-tile.secondary:hover {
border-color: #ff7043;
box-shadow: 0 0 40px rgba(255, 171, 145, 0.6);
}

.checkbox-icon.secondary {
color: #d84315;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="checkbox-wrapper">
  <label>
      <input type="checkbox" class="checkbox-input" />
      <span class="checkbox-tile">
          <span class="checkbox-icon">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.59L6.41 13 5 14.41l5 5 10-10L18.59 8 10 16.59z"></path>
              </svg>
          </span>
      </span>
      <span class="checkbox-label">Completed</span>
  </label>
</div>

<div class="checkbox-wrapper">
  <label>
      <input type="checkbox" class="checkbox-input" />
      <span class="checkbox-tile secondary">
          <span class="checkbox-icon">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17.93c-2.83-.47-5-2.94-5-5.93h2c0 2.48 2.01 4.5 4.5 4.5v2zm6.39-3.46l-1.39-1.39c-.26.13-.53.26-.82.37l1.09 1.09-1.41 1.41-1.09-1.09c-.11.3-.24.57-.37.82l1.39 1.39-1.41 1.41-1.09-1.09c-.31.15-.63.28-.96.4l-.25.11v-2.1c.34-.11.67-.24.96-.4l1.09 1.09 1.41-1.41-1.09-1.09c.13-.3.26-.57.37-.82l1.09 1.09 1.41-1.41-1.09-1.09c.3-.11.57-.24.82-.37l1.39 1.39 1.41-1.41-1.39-1.39c.13-.3.24-.57.37-.82l1.09 1.09 1.41-1.41-1.09-1.09c.15-.3.28-.63.4-.96h2.1c-.1.34-.24.67-.4.96l-1.09-1.09-1.41 1.41 1.09 1.09c-.13.3-.24.57-.37.82z"></path>
              </svg>
          </span>
      </span>
      <span class="checkbox-label" style="margin-left: 1.2rem;">Error</span>
  </label>
</div>

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  height: 100vh;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  font-family: 'Arial', sans-serif;
  color: #fff;
}

.checkbox-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.checkbox-input {
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(100%);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.checkbox-tile {
  display: flex;
  margin-bottom: 1rem;
  justify-content: center;
  align-items: center;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: #1f2937;
  border: 2px solid #64748b;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.4s ease;
  position: relative;
  cursor: pointer;
}

.checkbox-tile:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.checkbox-input:checked + .checkbox-tile {
  background: #0ea5e9;
  border-color: #38bdf8;
  box-shadow: 0 0 20px rgba(14, 165, 233, 0.5), 0 0 40px rgba(14, 165, 233, 0.3);
}

.checkbox-input:checked + .checkbox-tile:before {
  opacity: 1;
  transform: scale(1.1);
}

.checkbox-icon {
  width: 2.5rem;
  height: 2.5rem;
  color: #64748b;
  transition: color 0.4s ease;
}

.checkbox-input:checked + .checkbox-tile .checkbox-icon {
  color: #fff;
}

.checkbox-label {
  font-size: 1.1rem;
  color: #cbd5e1;
  transition: color 0.4s ease;
}

.checkbox-input:checked + .checkbox-tile + .checkbox-label {
  color: #38bdf8;
}

/* Second checkbox variant */
.checkbox-tile.secondary {
  background: #f87171;
  border-color: #fca5a5;
}

.checkbox-input:checked + .checkbox-tile.secondary {
  background: #ef4444;
  border-color: #f87171;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.5), 0 0 40px rgba(239, 68, 68, 0.3);
}

.checkbox-input:checked + .checkbox-tile.secondary .checkbox-icon {
  color: #fff;
}

.checkbox-input:checked + .checkbox-tile.secondary + .checkbox-label {
  color: #f87171;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<label class="checkbox-container">
  <input type="checkbox" />
  <div class="checkbox-custom"></div>
  <span class="checkbox-label">Pop Checkbox</span>
</label>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: #242424;
  font-family: Arial, sans-serif;
  color: #ffffff;
}

.checkbox-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
}

input[type="checkbox"] {
  display: none;
}

.checkbox-custom {
  width: 3rem;
  height: 3rem;
  border-radius: 10px;
  background: #ffffff;
  position: relative;
  transform: scale(1);
  transition: background 0.3s ease, transform 0.2s ease;
}

input[type="checkbox"]:checked + .checkbox-custom {
  background: #00bcd4;
  transform: scale(1.2);
}

.checkbox-label {
  font-size: 1.2rem;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<label class="checkbox-container">
  <input type="checkbox" />
  <div class="checkbox-custom"></div>
  <span class="checkbox-label">Rotate Checkbox</span>
</label>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: linear-gradient(135deg, #ffffff, #e8e6eb);
  font-family: Arial, sans-serif;
}

.checkbox-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
}

input[type="checkbox"] {
  display: none;
}

.checkbox-custom {
  width: 3rem;
  height: 3rem;
  border: 0.3rem solid #000000;
  background: transparent;
  position: relative;
  transition: transform 0.4s ease;
}

input[type="checkbox"]:checked + .checkbox-custom {
  transform: rotate(360deg);
  background: #03a9f4;
}

.checkbox-label {
  font-size: 1.2rem;
  color: #000000;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<label class="checkbox-wrapper">
  <input type="checkbox" class="checkbox-input" />
  <span class="checkbox-tile">
      <span class="checkbox-progress"></span>
      <span class="checkbox-check">✔</span>
  </span>
</label>

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #1e3a8a, #1e40af);
  font-family: 'Arial', sans-serif;
  color: #fff;
}

.checkbox-wrapper {
  position: relative;
  width: 4rem;
  height: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.checkbox-input {
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(100%);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.checkbox-tile {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #1e293b;
  border: 2px solid #64748b;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}

.checkbox-progress {
  position: absolute;
  width: 0%;
  height: 100%;
  background: #0ea5e9;
  border-radius: 50%;
  transition: width 1s ease;
  clip-path: circle();
}

.checkbox-check {
  position: absolute;
  opacity: 0;
  transition: opacity 0.3s ease;
  font-size: 2rem;
  color: #fff;
}

.checkbox-input:checked + .checkbox-tile .checkbox-progress {
  width: 100%;
  height: 100%;
}

.checkbox-input:checked + .checkbox-tile .checkbox-check {
  opacity: 1;
}

.checkbox-input:checked + .checkbox-tile {
  border-color: #0ea5e9;
  box-shadow: 0 0 15px rgba(14, 165, 233, 0.5);
}

.checkbox-tile:hover {
  border-color: #0ea5e9;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<label class="checkbox-container">
  <input type="checkbox" />
  <div class="checkbox-custom"></div>
  <span class="checkbox-label">Shinning Checkbox</span>
</label>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: #202020;
  font-family: Arial, sans-serif;
  color: #ffffff;
}

.checkbox-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
}

input[type="checkbox"] {
  display: none;
}

.checkbox-custom {
  width: 3rem;
  height: 3rem;
  background: #ffffff;
  position: relative;
  box-shadow: none;
  transition: box-shadow 0.3s ease, border-radius 0.3s ease;
}

input[type="checkbox"]:checked + .checkbox-custom {
  box-shadow: 0 0 90px 50px rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  border: 10px inset #ffffff;
}

.checkbox-label {
  font-size: 1.2rem;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<label class="checkbox-wrapper">
  <input type="checkbox" class="checkbox-input" />
  <div class="checkbox-tile">
      <!-- Front Face -->
      <div class="checkbox-face checkbox-front">😐</div>
      <!-- Back Face -->
      <div class="checkbox-face checkbox-back">✅</div>
  </div>
</label>

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  font-family: 'Arial', sans-serif;
  color: #fff;
}

.checkbox-wrapper {
  perspective: 1000px;
  display: inline-block;
}

.checkbox-input {
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(100%);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.checkbox-tile {
  width: 5rem;
  height: 5rem;
  background: #ffffff;
  border-radius: 0.5rem;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.checkbox-tile .checkbox-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  border-radius: 0.5rem;
}

.checkbox-tile .checkbox-front {
  background: #e0e0e0;
  color: #374151;
}

.checkbox-tile .checkbox-back {
  background: #22c55e;
  color: #fff;
  transform: rotateY(180deg);
}

.checkbox-input:checked + .checkbox-tile {
  transform: rotateY(180deg);
}

.checkbox-tile:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<label class="checkbox-wrapper">
  <input type="checkbox" class="checkbox-input" />
  <div class="checkbox-tile">
      <div class="ripple"></div>
      <div class="checkbox-icon">⬤</div>
  </div>
</label>

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #ff7eb3, #ff758c);
  font-family: 'Arial', sans-serif;
  color: #fff;
}

.checkbox-wrapper {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  cursor: pointer;
}

.checkbox-input {
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(100%);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.checkbox-tile {
  width: 4rem;
  height: 4rem;
  background: #ffffff;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.checkbox-tile .ripple {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255, 118, 152, 0.6), transparent);
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.checkbox-tile .checkbox-icon {
  font-size: 1.5rem;
  color: #ff758c;
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.checkbox-input:checked + .checkbox-tile .ripple {
  transform: scale(3);
  opacity: 1;
}

.checkbox-input:checked + .checkbox-tile .checkbox-icon {
  opacity: 0;
}

.checkbox-input:checked + .checkbox-tile:after {
  content: "✔";
  position: absolute;
  font-size: 1.5rem;
  color: #ffffff;
  background: #ff758c;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scale(1);
  transition: transform 0.3s ease;
}

.checkbox-tile:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="checkbox-container">
  <label class="checkbox-wrapper">
      <input type="checkbox" id="checkbox1" class="checkbox-input" />
      <span class="checkbox-tile">
          <svg viewBox="0 0 256 256">
              <path d="M48 128L112 192L208 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
          </svg>
      </span>
  </label>
  <label for="checkbox1" class="checkbox-label">Yes</label>

  <label class="checkbox-wrapper">
      <input type="checkbox" id="checkbox2" class="checkbox-input" />
      <span class="checkbox-tile">
          <svg viewBox="0 0 256 256">
              <path d="M48 128L112 192L208 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
          </svg>
      </span>
  </label>
  <label for="checkbox2" class="checkbox-label">No</label>
</div>

body {
  background: linear-gradient(135deg, #000000, #1f1f20);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.checkbox-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.checkbox-wrapper {
  position: relative;
  width: 60px;
  height: 60px;
  cursor: pointer;
}

.checkbox-input {
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(100%);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.checkbox-tile {
  width: 30px;
  height: 30px;
  border: 3px solid #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  transition: background 0.3s ease, transform 0.2s ease;
  position: relative;
}

.checkbox-input:checked + .checkbox-tile {
  background-color: #2dfffc;
  border-color: #2dfffc;
  transform: scale(1.1);
}

.checkbox-input:checked + .checkbox-tile svg path {
  stroke: #2dfffc;
  stroke-dasharray: 125;
  stroke-dashoffset: 125;
  animation: draw 0.5s forwards;
}

.checkbox-input:focus + .checkbox-tile {
  border-color: #2dfffc;
  box-shadow: 0 0 20px rgba(46, 255, 252, 0.5), 0 0 40px rgba(46, 255, 252, 0.3), 0 0 0 4px #c48fff;
}

.checkbox-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.checkbox-input:checked + .checkbox-tile .checkbox-icon {
  opacity: 1;
}

.checkbox-label {
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  transition: color 0.3s ease;
  margin-top: -20px;
  margin-left: -20px;
}

.checkbox-input:checked + .checkbox-tile + .checkbox-label {
  color: #2dfffc;
}

.checkbox-input + .checkbox-tile svg {
  width: 30px;
  height: 30px;
  stroke: #fff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

@keyframes draw {
  to {
      stroke-dashoffset: 0;
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<label class="checkbox-wrapper">
  <input type="checkbox" class="checkbox-input" />
  <div class="checkbox-tile">
      <div class="progress-ring unchecked"></div>
      <div class="checkbox-icon">⏺</div>
  </div>
</label>

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #ff9a9e, #fad0c4);
  font-family: 'Arial', sans-serif;
}

.checkbox-wrapper {
  position: relative;
  width: 5rem;
  height: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.checkbox-input {
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(100%);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.checkbox-tile {
  position: relative;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.progress-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10%;
  border: 5px solid transparent;
  box-sizing: border-box;
  animation: progress-animation 0.8s ease forwards;
  transform: rotate(-90deg);
}

.progress-ring.unchecked {
  border-color: #d1d5db;
}

.checkbox-icon {
  font-size: 1.5rem;
  color: #d1d5db;
  opacity: 1;
  transition: color 0.3s ease, transform 0.3s ease;
}

.checkbox-input:checked + .checkbox-tile .checkbox-icon {
  transform: scale(1.6);
}

.checkbox-tile:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div>
  <input type="checkbox" id="classic-checkbox" />
  <label for="classic-checkbox">Classic Checkbox</label>
</div>

body {
  font-family: Arial, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}
label {
  font-size: 16px;
  color: #333;
  cursor: pointer;
}
input[type="checkbox"] {
  margin-right: 8px;
  transform: scale(1.2);
  cursor: pointer;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<label class="custom-checkbox">
  <input type="checkbox" />
  <span></span>
</label>

body {
  font-family: Arial, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000000; /* Optional: Add background color for better visibility */
}
.custom-checkbox {
  display: inline-block;
  position: relative;
  width: 45px;
  height: 45px;
}
.custom-checkbox input {
  display: none;
}
.custom-checkbox span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  border: 3px solid #f4149a;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px; /* Adjust the font size as needed */
}
.custom-checkbox input:checked + span {
  background-color: #000000;
  border: 3px double #21ffbc;
  color: white; /* Set the color of the check icon to white for better visibility */
}
.custom-checkbox span::after {
  content: '\f5ac'; /* Correct FontAwesome check icon code */
  font-family: 'Font Awesome 6 Free'; /* Ensure the correct font family is used */
  font-weight: 900; /* FontAwesome icons require a specific font weight */
  opacity: 0;
  font-size: 2rem;
  transition: opacity 0.3s;
}
.custom-checkbox input:checked + span::after {
  opacity: 1;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<label class="toggle-switch">
  <input type="checkbox" />
  <span class="slider"></span>
</label>

body {
  font-family: Arial, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000000; /* Optional: Add background color for better visibility */
}
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 25px;
}
.toggle-switch input {
  display: none;
}
.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 25px;
  cursor: pointer;
  transition: 0.4s;
}
.slider::before {
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 2.5px;
  background-color: white;
  border-radius: 50%;
  transition: 0.4s;
}
input:checked + .slider {
  background-color: #664caf;
}
input:checked + .slider::before {
  transform: translateX(25px);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<label class="gradient-checkbox">
  <input type="checkbox" />
  <span></span>
</label>

    body{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .gradient-checkbox {
      display: inline-block;
      position: relative;
    }
    .gradient-checkbox input {
      display: none;
    }
    .gradient-checkbox span {
      display: inline-block;
      width: 25px;
      height: 25px;
      border: 2px solid transparent;
      background: linear-gradient(45deg, #6a11cb, #2575fc);
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    .gradient-checkbox span:hover {
      transform: scale(1.1);
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }
    .gradient-checkbox input:checked + span {
      background: linear-gradient(45deg, #28a745, #00c853);
      border-color: #1e7e34;
    }

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<label class="ripple-checkbox">
  <input type="checkbox" />
  <span></span>
</label>

body{
    display: flex;
    justify-content: center;
    align-items: center;
}
.ripple-checkbox {
  position: relative;
  display: inline-block;
}
.ripple-checkbox input {
  display: none;
}
.ripple-checkbox span {
  width: 25px;
  height: 25px;
  background-color: #eee;
  border: 2px solid #333;
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  position: relative;
}
.ripple-checkbox input:checked + span {
  background-color: #13ffac;
  border-color: #000000;
}
.ripple-checkbox span::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease;
}
.ripple-checkbox input:checked + span::after {
  width: 100px;
  height: 100px;
  opacity: 0;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<label class="filling-checkbox">
  <input type="checkbox" />
  <span></span>
</label>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f4f4f9;
}
.filling-checkbox {
  position: relative;
}
.filling-checkbox input {
  display: none;
}
.filling-checkbox span {
  display: inline-block;
  width: 5px;
  height: 5px;
  border: 6px solid #333;
  border-radius: 4px;
  cursor: pointer;
  background-color: transparent;
  transition: all 0.5s linear;
}
.filling-checkbox input:checked + span {
  background-color: #15ffe8;
  border-color: #bb5309;
  width: 35px;
  height: 35px;
  transform: rotate(360deg);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<label class="pulsating-checkbox">
  <input type="checkbox" />
  <span></span>
</label>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #000000;
}
.pulsating-checkbox {
  position: relative;
}
.pulsating-checkbox input {
  display: none;
}
.pulsating-checkbox span {
  display: inline-block;
  width: 25px;
  height: 25px;
  border: 2px solid #333;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.3s ease;
}
.pulsating-checkbox input:checked + span {
  animation: pulse 1.5s infinite;
  border-color: #4caf50;
}
@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
  }
  50% {
    box-shadow: 0 0 10px 10px rgba(76, 175, 80, 0);
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<label class="custom-checkbox bounce">
  <input type="checkbox" />
  <span></span>
</label>

body {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  justify-content: center;
  background-color: #f0f0f0;
  gap: 20px;
}

.custom-checkbox {
  display: inline-block;
  position: relative;
  width: 25px;
  height: 25px;
}

.custom-checkbox input {
  display: none;
}

.custom-checkbox span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ccc;
  border: 2px solid #333;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background-color 0.3s;
}

.custom-checkbox input:checked + span {
  background-color: #040a04;
  color: white;
}

.bounce span::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
}

.bounce input:checked + span::after {
  opacity: 1;
  animation: bounce 0.5s ease-in-out;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<body>
  <label class="custom-checkbox">
    <input type="checkbox" />
    <span></span>
  </label>
  <label class="custom-checkbox">
    <input type="checkbox" />
    <span></span>
  </label>
  <label class="custom-checkbox">
    <input type="checkbox" />
    <span></span>
  </label>
  <label class="custom-checkbox">
    <input type="checkbox" />
    <span></span>
  </label>
  <label class="custom-checkbox">
    <input type="checkbox" />
    <span></span>
  </label>

body {
  font-family: Arial, sans-serif;
  display: flex;
  height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0;
  gap: 20px;
}

.custom-checkbox {
  display: inline-block;
  position: relative;
  width: 25px;
  height: 25px;
}

.custom-checkbox input {
  display: none;
}

.custom-checkbox span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ccc;
  border: 2px solid #333;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background-color 0.3s;
}

.custom-checkbox input:checked + span {
  background-color: #4caf50;
  color: white;
  animation: pulsate 0.5s ease-in-out infinite;
}

@keyframes pulsate {
  0% {
    border-width: 2px;
  }
  50% {
    border-width: 4px;
  }
  100% {
    border-width: 2px;
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <label class="glassmorphism-checkbox">
    <input type="checkbox" />
    <span></span>
  </label>

body {
  font-family: Arial, sans-serif;
  display: flex;
  height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #e0f7fa;
  gap: 20px;
}

.glassmorphism-checkbox {
  display: inline-block;
  position: relative;
  width: 25px;
  height: 25px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.glassmorphism-checkbox input {
  display: none;
}

.glassmorphism-checkbox span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: transparent;
  transition: color 0.3s;
}

.glassmorphism-checkbox input:checked + span {
  color: #009688;
}

.glassmorphism-checkbox span::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  opacity: 0;
  transition: opacity 0.3s;
}

.glassmorphism-checkbox input:checked + span::after {
  opacity: 1;
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <label class="neumorphism-checkbox">
    <input type="checkbox" />
    <span></span>
  </label>

body {
  font-family: Arial, sans-serif;
  display: flex;
  height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
  gap: 20px;
}

.neumorphism-checkbox {
  display: inline-block;
  position: relative;
  width: 25px;
  height: 25px;
  background: #e0e0e0;
  border-radius: 4px;
  box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
  cursor: pointer;
  transition: background-color 0.3s, box-shadow 0.3s;
}

.neumorphism-checkbox input {
  display: none;
}

.neumorphism-checkbox span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: transparent;
  transition: color 0.3s;
}

.neumorphism-checkbox input:checked + span {
  color: #00796b;
  background: #81c784;
  box-shadow: inset 6px 6px 12px #649966, inset -6px -6px 12px #b4e3b3;
}

.neumorphism-checkbox span::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  opacity: 0;
  transition: opacity 0.3s;
}

.neumorphism-checkbox input:checked + span::after {
  opacity: 1;
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <label class="unique-checkbox">
    <input type="checkbox" />
    <span></span>
  </label>

body {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #000000;
  gap: 20px;
}

.unique-checkbox {
  display: inline-block;
  position: relative;
  width: 25px;
  height: 25px;
  background-color: #e0f7fa;
  border: 2px solid #b2ebf2;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
}

.unique-checkbox input {
  display: none;
}

.unique-checkbox span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: transparent;
  transition: color 0.3s;
}

.unique-checkbox input:checked + span {
  color: #009688;
  background-color: #ff0073;
  border-color: #81c784;
  border-radius: 50%;
}

.unique-checkbox span::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  opacity: 0;
  transition: opacity 0.3s;
}

.unique-checkbox input:checked + span::after {
  opacity: 1;
  animation: spinAndFadeIn 0.5s ease-in-out;
}

@keyframes spinAndFadeIn {
  0% {
    opacity: 0;
    transform: rotate(0deg);
  }
  50% {
    opacity: 0.5;
    transform: rotate(180deg);
  }
  100% {
    opacity: 1;
    transform: rotate(360deg);
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <label class="neon-checkbox">
    <input type="checkbox" />
    <div class="neon-checkbox__frame">
      <div class="neon-checkbox__box">
        <div class="neon-checkbox__check-container">
          <svg viewBox="0 0 24 24" class="neon-checkbox__check">
            <path d="M3,12.5l7,7L21,5"></path>
          </svg>
        </div>
        <div class="neon-checkbox__glow"></div>
        <div class="neon-checkbox__borders">
          <span></span><span></span><span></span><span></span>
        </div>
      </div>
      <div class="neon-checkbox__effects">
        <div class="neon-checkbox__particles">
          <span></span><span></span><span></span><span></span> <span></span
          ><span></span><span></span><span></span> <span></span><span></span
          ><span></span><span></span>
        </div>
        <div class="neon-checkbox__rings">
          <div class="ring"></div>
          <div class="ring"></div>
          <div class="ring"></div>
        </div>
        <div class="neon-checkbox__sparks">
          <span></span><span></span><span></span><span></span>
        </div>
      </div>
    </div>
  </label>

body{
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        background-color: #726c6c;
        display: flex;
        justify-content: center;
        align-items: center;
    }

.neon-checkbox {
  --primary: #ffffff;
  --primary-dark: #5dffef;
  --primary-light: #88ffdd;
  --size: 30px;
  position: relative;
  width: var(--size);
  height: var(--size);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.neon-checkbox input {
  display: none;
}

.neon-checkbox__frame {
  position: relative;
  width: 100%;
  height: 100%;
}

.neon-checkbox__box {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 40px;
  border: 2px solid var(--primary-dark);
  transition: all 0.4s ease;
}

.neon-checkbox__check-container {
  position: absolute;
  inset: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.neon-checkbox__check {
  width: 80%;
  height: 80%;
  fill: none;
  stroke: var(--primary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  transform-origin: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.neon-checkbox__glow {
  position: absolute;
  inset: -2px;
  border-radius: 6px;
  background: var(--primary);
  opacity: 0;
  filter: blur(8px);
  transform: scale(1.2);
  transition: all 0.4s ease;
}

.neon-checkbox__borders {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  overflow: hidden;
}

.neon-checkbox__borders span {
  position: absolute;
  width: 40px;
  height: 1px;
  background: var(--primary);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.neon-checkbox__borders span:nth-child(1) {
  top: 0;
  left: -100%;
  animation: borderFlow1 2s linear infinite;
}

.neon-checkbox__borders span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 1px;
  height: 40px;
  animation: borderFlow2 2s linear infinite;
}

.neon-checkbox__borders span:nth-child(3) {
  bottom: 0;
  right: -100%;
  animation: borderFlow3 2s linear infinite;
}

.neon-checkbox__borders span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 1px;
  height: 40px;
  animation: borderFlow4 2s linear infinite;
}

.neon-checkbox__particles span {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--primary);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  top: 50%;
  left: 50%;
  box-shadow: 0 0 6px var(--primary);
}

.neon-checkbox__rings {
  position: absolute;
  inset: -20px;
  pointer-events: none;
}

.neon-checkbox__rings .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--primary);
  opacity: 0;
  transform: scale(0);
}

.neon-checkbox__sparks span {
  position: absolute;
  width: 20px;
  height: 1px;
  background: linear-gradient(90deg, var(--primary), transparent);
  opacity: 0;
}

/* Hover Effects */
.neon-checkbox:hover .neon-checkbox__box {
  border-color: var(--primary);
  transform: scale(1.05);
}

/* Checked State */
.neon-checkbox input:checked ~ .neon-checkbox__frame .neon-checkbox__box {
  border-color: var(--primary);
  background: rgba(0, 255, 170, 0.1);
  border-radius: 4px;
}

.neon-checkbox input:checked ~ .neon-checkbox__frame .neon-checkbox__check {
  stroke-dashoffset: 0;
  transform: scale(1.1);
}

.neon-checkbox input:checked ~ .neon-checkbox__frame .neon-checkbox__glow {
  opacity: 0.2;
}

.neon-checkbox
  input:checked
  ~ .neon-checkbox__frame
  .neon-checkbox__borders
  span {
  opacity: 1;
}

/* Particle Animations */
.neon-checkbox
  input:checked
  ~ .neon-checkbox__frame
  .neon-checkbox__particles
  span {
  animation: particleExplosion 0.6s ease-out forwards;
}

.neon-checkbox
  input:checked
  ~ .neon-checkbox__frame
  .neon-checkbox__rings
  .ring {
  animation: ringPulse 0.6s ease-out forwards;
}

.neon-checkbox
  input:checked
  ~ .neon-checkbox__frame
  .neon-checkbox__sparks
  span {
  animation: sparkFlash 0.6s ease-out forwards;
}

/* Animations */
@keyframes borderFlow1 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200%);
  }
}

@keyframes borderFlow2 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(200%);
  }
}

@keyframes borderFlow3 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-200%);
  }
}

@keyframes borderFlow4 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-200%);
  }
}

@keyframes particleExplosion {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translate(
        calc(-50% + var(--x, 20px)),
        calc(-50% + var(--y, 20px))
      )
      scale(0);
    opacity: 0;
  }
}

@keyframes ringPulse {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes sparkFlash {
  0% {
    transform: rotate(var(--r, 0deg)) translateX(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: rotate(var(--r, 0deg)) translateX(30px) scale(0);
    opacity: 0;
  }
}

/* Particle Positions */
.neon-checkbox__particles span:nth-child(1) {
  --x: 25px;
  --y: -25px;
}
.neon-checkbox__particles span:nth-child(2) {
  --x: -25px;
  --y: -25px;
}
.neon-checkbox__particles span:nth-child(3) {
  --x: 25px;
  --y: 25px;
}
.neon-checkbox__particles span:nth-child(4) {
  --x: -25px;
  --y: 25px;
}
.neon-checkbox__particles span:nth-child(5) {
  --x: 35px;
  --y: 0px;
}
.neon-checkbox__particles span:nth-child(6) {
  --x: -35px;
  --y: 0px;
}
.neon-checkbox__particles span:nth-child(7) {
  --x: 0px;
  --y: 35px;
}
.neon-checkbox__particles span:nth-child(8) {
  --x: 0px;
  --y: -35px;
}
.neon-checkbox__particles span:nth-child(9) {
  --x: 20px;
  --y: -30px;
}
.neon-checkbox__particles span:nth-child(10) {
  --x: -20px;
  --y: 30px;
}
.neon-checkbox__particles span:nth-child(11) {
  --x: 30px;
  --y: 20px;
}
.neon-checkbox__particles span:nth-child(12) {
  --x: -30px;
  --y: -20px;
}

/* Spark Rotations */
.neon-checkbox__sparks span:nth-child(1) {
  --r: 0deg;
  top: 50%;
  left: 50%;
}
.neon-checkbox__sparks span:nth-child(2) {
  --r: 90deg;
  top: 50%;
  left: 50%;
}
.neon-checkbox__sparks span:nth-child(3) {
  --r: 180deg;
  top: 50%;
  left: 50%;
}
.neon-checkbox__sparks span:nth-child(4) {
  --r: 270deg;
  top: 50%;
  left: 50%;
}

/* Ring Delays */
.neon-checkbox__rings .ring:nth-child(1) {
  animation-delay: 0s;
}
.neon-checkbox__rings .ring:nth-child(2) {
  animation-delay: 0.1s;
}
.neon-checkbox__rings .ring:nth-child(3) {
  animation-delay: 0.2s;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <label class="container">
    <input type="checkbox" />
    <svg viewBox="0 0 64 64" height="2em" width="2em">
      <defs>
        <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" style="stop-color: #ff7e5f; stop-opacity: 1" />
          <stop offset="100%" style="stop-color: #feb47b; stop-opacity: 1" />
        </linearGradient>
      </defs>
      <path d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16" pathLength="575.0541381835938" class="path"></path>
    </svg>
    <div class="sparkle">
      <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
    </div>
  </label>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000000;
}

.container {
  cursor: pointer;
  position: relative;
  width: 64px;
  height: 64px;
}

.container input {
  display: none;
}

.container svg {
  overflow: visible;
  width: 100%;
  height: 100%;
}

.path {
  fill: none;
  stroke: url(#gradient);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-dasharray 0.5s ease, stroke-dashoffset 0.5s ease;
  stroke-dasharray: 241 9999999;
  stroke-dashoffset: 0;
}

.container input:checked ~ svg .path {
  stroke-dasharray: 70.5096664428711 9999999;
  stroke-dashoffset: -262.2723388671875;
  animation: glowAnimation 1s ease-in-out infinite;
}

/* Sparkle Effect */
.sparkle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.sparkle span {
  position: absolute;
  width: 4px;
  height: 4px;
  background: url(#gradient);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 10px #ff7e5f, 0 0 20px #feb47b;
}

.container input:checked ~ .sparkle span {
  animation: sparkleAnimation 0.6s ease-in-out forwards;
}

@keyframes glowAnimation {
  0% {
    filter: drop-shadow(0 0 10px #ff7e5f) drop-shadow(0 0 20px #feb47b);
  }
  50% {
    filter: drop-shadow(0 0 20px #ff7e5f) drop-shadow(0 0 30px #feb47b);
  }
  100% {
    filter: drop-shadow(0 0 10px #ff7e5f) drop-shadow(0 0 20px #feb47b);
  }
}

@keyframes sparkleAnimation {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2) rotate(360deg);
    opacity: 0;
  }
}

/* Sparkle Positions */
.sparkle span:nth-child(1) {
  top: calc(50% - 15px);
  left: calc(50% - 15px);
}
.sparkle span:nth-child(2) {
  top: calc(50% + 15px);
  left: calc(50% + 15px);
}
.sparkle span:nth-child(3) {
  top: calc(50% - 15px);
  left: calc(50% + 15px);
}
.sparkle span:nth-child(4) {
  top: calc(50% + 15px);
  left: calc(50% - 15px);
}
.sparkle span:nth-child(5) {
  top: calc(50% - 30px);
  left: calc(50%);
}
.sparkle span:nth-child(6) {
  top: calc(50% + 30px);
  left: calc(50%);
}
.sparkle span:nth-child(7) {
  top: calc(50%);
  left: calc(50% - 30px);
}
.sparkle span:nth-child(8) {
  top: calc(50%);
  left: calc(50% + 30px);
}

<!-- No JS code needed for this element -->

51 Checkboxes

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code