.wrap
{
  width:400px;
  margin:auto;
  top:40%;
  border:10px solid #c0c0c0;
  border-radius:20px;
  padding:30px;
  margin-top:80px;
  font-size:60pt;
  font-family: Arial,sans-serif;
  font-weight:bolder;
  text-transform:uppercase;
}

.toggle
{
  
  width:50px;
  height:50px;
  border:10px solid black;
  border-radius:45px;
  transition-duration:1s;
  left:175px;
  transform:rotate(45deg);  
  position:relative;
  top:6px;
  background-color:red;
  border-bottom-left-radius:0px;
  cursor:pointer;
  display:inline-block;
}


.toggle.enabled {
  background-color:green;
  border-radius:45px;
  border-bottom-left-radius:45px;
  border-top-right-radius:0px;
  
}
.toggle::before
{
  display:inline-block;
  transform:rotate(-45deg);
  content:"OFF";
  transition-duration:1s;
  position:absolute;
  left:-145px;
  top:75px;
}

.toggle::after
{
  display:inline-block;
  transform:rotate(-45deg);
  content:"ON";
  position:absolute;
  transition-duration:1s;
  top:-110px;
  left:55px;
}

.toggle.enabled::before {
  color:grey;
}
.toggle.enabled::after {
  color:green;
}

.toggle::before {
  color:red;
}

.toggle::after {
  color:grey;
}