AnonyFriday/index.html

## index.html
!<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
  </head>

  <body>
    <label for="switch">
      <input type="checkbox" name="" id="switch">
      <span class="switch--bg">
        <span></span>
      </span>
    </label>
  </body>

</html>

## reset.scss
*,
*::after,
*::before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100vh;
}

## switch.scss
.switch {
  display: inline-block;

  input {
    display: none;
  }

  &--bg {
    display: inline-block;
    width: 100px;
    height: 50px;
    background-color: aquamarine;
    border-radius: 25px;
    position: relative;

    span {
      display: inline-block;
      position: absolute;
      right: 4px;
      left: auto;
      top: 50%;
      transform: translateY(-50%);
      width: 40px;
      height: 40px;
      border-radius: 20px;
      background-color: red;
    }
  }

  // :checked state
  input:checked + &--bg {
    background-color: gray;
  }

  input:checked + &--bg {
    span {
      left: 4px;
      right: auto;
    }
  }
}
	!<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="./css/index.css">
	</head>

	<body>
	<label for="switch">
	<input type="checkbox" name="" id="switch">
	<span class="switch--bg">
	<span></span>
	</span>
	</label>
	</body>

	</html>
	*,
	*::after,
	*::before {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	}

	html,
	body {
	height: 100vh;
	}
	.switch {
	display: inline-block;

	input {
	display: none;
	}

	&--bg {
	display: inline-block;
	width: 100px;
	height: 50px;
	background-color: aquamarine;
	border-radius: 25px;
	position: relative;

	span {
	display: inline-block;
	position: absolute;
	right: 4px;
	left: auto;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 20px;
	background-color: red;
	}
	}

	// :checked state
	input:checked + &--bg {
	background-color: gray;
	}

	input:checked + &--bg {
	span {
	left: 4px;
	right: auto;
	}
	}
	}