Teardrop toggle

index.html

<div class="wrap">
  
<div class="toggle"></div>
  
</div>

script.js

var toggler = document.querySelector('.toggle');
toggler.addEventListener('mousedown',function(evt){
  
  toggle();  
});

function toggle() {
  if(toggler.classList.contains('enabled')) {
    toggler.classList.remove('enabled');
    
  } else {
    toggler.classList.add('enabled');
    
  }

}

setTimeout(toggle, 500);
setTimeout(toggle, 3000);

style.css

.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;
}

Teardrop-toggle.markdown

Teardrop toggle

I saw this one http://codepen.io/Oka/pen/RNKeEp and wanted to try it without the rotation!

Forked from Brandel Zachernuk's Pen Teardrop toggle.

A Pen by Captain Anonymous on CodePen.

License.