.button{
  border-style: none;
  height: 40px;
  padding: 6px 12px;
  background-color: black;
  color: white;
  font-size: 1rem;
  cursor: pointer;
}
.button.blue{
  background-color: #1FB6FF;
}
button.green{
  background-color: #13CE66;
}
button.red{
  background-color: #FF4949;
}
.button:hover{
  box-shadow: inset 200px 0 0 #00000055;
}

input[type=checkbox]{
  height: 0;
  width: 0;
  visibility: hidden;
}

label {
  cursor: pointer;
  text-indent: -9999px;
  width: 52px;
  height: 27px;
  background: grey;
  float: right;
  border-radius: 100px;
  position: relative;
}

label::after{
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 90px;
  transition: 0.3s;
}

input:checked + label {
  background-color: #1FB6FF;
}

input:checked + label::after {
  left: calc(100% - 5px);
  transform: translateX(-100%);
}

label:active:after {
  width: 45px;
}

@media(max-width:480px){
  .button.mobile{
      color:transparent;
      font-size:0;
      width:50px;
      height:50px;
      border-radius: 50%;
      position:fixed;
      top: 90vh;
      left: 80vw;
  }
  .button.mobile::before{
      content: "+";
      color:black;
      font-size:2rem;
      width:100%;
      height:100%;
  }
}