Toggle the position of a button with checkbox

This problem appears while trying to make a theme switcher scheme within a website when I click on the checkbox the translation movement in the X position doesn´t happen.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.alt-theme {
  height: 80vh;
  position: absolute;
  right: 10em;
}

.checkbox {
  opacity: 1;
  position: absolute;
}

.checkbox-label {
  background-color: #111;
  border-radius: 50px;
  cursor: pointer;
  
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  height: 26px;
  width: 50px;
  
  transform: scale(1.5);
}

.checkbox-label .ball {
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  height: 22px;
  width: 22px;
  transform: translateX(0);
  transition: transform 0.2s linear;
}

<!-- language: lang-html -->

<div class="alt-theme">
  <label for="checkbox" class="checkbox-label">
    <i class="fa-solid fas fa-moon" style="color: #000; background: none;" />
    <i class="fa-solid fas fa-sun" style="color: #000; background: none;" />
    <div class="ball" />
  </label>
  
  <input type="checkbox" class="checkbox" />
</div>

<!-- end snippet -->

The movement of this white ball inside the label of the checkbox.

The approach you've taken is not bad, but there is room for improvement. Please read through the comments added to the code to better understand the underlying principles.

Solution

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

/* Just sets position of the switch element */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide input element --> You won't see the checkbox square like this */
.switch input {
  display: none;
}

/* Sets background */
.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #555;
  transition: 0.4s;
  cursor: pointer;
  border-radius: 34px;
}

/* Sets circle */
.slider:before {
  position: absolute;  
  width: 26px;
  height: 26px;
  left: 4px;
  bottom: 4px;
  background-color: #fff;
  transition: 0.4s;
  border-radius: 34px;
  
  /* Sets icon when value of checkbox is false */
  font-family: "Font Awesome 5 Free";
  content: "\f186"; /* Font Awesome fas-moon */
  font-weight: 900;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sets background when value of checkbox is TRUE */
.switch input:checked + .slider {
  background-color: #ccc;
}

/* Sets icon when value of checkbox is TRUE */
.switch input:checked + .slider:before {
  content: "\f185"; /* Font Awesome fas-sun */
  transform: translateX(26px);
}

<!-- language: lang-html -->

<!-- Import FontAwesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">

<!-- Switch input -->
<label class="switch" for="checkbox">
  <!-- Store true/false value -->
  <input type="checkbox" id="checkbox" />
  <!-- Show circle with moon/sun icon -->
  <div class="slider round" />
</label>

<!-- end snippet -->

More information

• ::before psuedoelement - MDN
• CSS content property - MDN
• https://stackoverflow.com/questions/4146933/insert-special-character-using-before-pseudo-class-in-css - Stack Overflow answer
• CSS Pseudo-elements - FontAwesome docs