<div class="checkbox-block">

  <input type="checkbox" id="check" />

  <label for="check"></label>

</div>

* {

  box-sizing: border-box;

}

​

.checkbox-block {

  margin: 100px auto;

  width: max-content;

}

​

.checkbox-block label {

  display: block;

  --color: black;

  --container-width: 100px;

  width: var(--container-width);

  border: 2px solid var(--color);

  height: calc(var(--container-width) / 2);

  border-radius: 10px;

  position: relative;

  transition: border-color 300ms;

  cursor: pointer;

}

​

.checkbox-block label::after {

  content: "";

  --size: calc(var(--container-width) / 2 - 6px);

  width: var(--size);

  height: var(--size);

  background-color: var(--color);

  border-radius: 50%;

  position: absolute;

  left: 1px;

  top: 1px;

  transition: left 300ms, background-color 300ms;

}

​

.checkbox-block input {

  scale: 0;

  position: absolute;

}

​

.checkbox-block input:focus + label {

  outline: 2px solid var(--color);

  outline-offset: 2px;

}

​

.checkbox-block input:checked + label {

  --color: #00A693;

}

​

.checkbox-block:has(input:checked) label::after {

  left: calc(var(--container-width) / 2);

}