<div class="checkbox"><p class="hiza">Deneme</p>
  <input type="checkbox"/>
  <div class="checkbox-inner">
    <div class="checkbox-marker"></div>
  </div>
</div>
<br><br>
<div class="checkbox"><p class="hiza">Deneme</p>
  <input type="checkbox" checked/>
  <div class="checkbox-inner">
    <div class="checkbox-marker"></div>
  </div>
</div>

.hiza{
   
position: absolute;
right:40px;

}

body
  padding 100px

.checkbox
  position relative
  width 24px  
  height 14px
 
  input
    width 24px  
    height 14px
    opacity 0
   
  input:focus + .checkbox-inner
    box-shadow 0 0 0 2px rgba(#2B96F1, 0.3)
   
  input:checked + .checkbox-inner
    background #2B96F1
   
    .checkbox-marker
      transform translateX(10px)
   
.checkbox-inner
  position absolute
  top 0
  background rgba(0,0,0,0.1)
  border-radius 15px
  pointer-events none
  height 14px
  width 24px
 
.checkbox-marker
  height 10px
  width 10px
  border-radius 50%
  background white
  position absolute
  left 2px
  top 2px
  box-shadow 0 0 0 1px rgba(black, 0.1)
  transition all 100ms ease