CodePen

HTML

            
              <div id="auto-renew" class="active">
  <a href="#" class="btn hide-text">on</a>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              #auto-renew {
  position: relative;
  width: 65px;
  height: 30px;
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -webkit-box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, .45);
  box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, .45);  
  cursor: pointer;
}

#auto-renew.active {
  background: url('http://f.cl.ly/items/0D3Q0b0K3A03353u1f05/refresh.png') no-repeat 9px center #5a9903;
}

#auto-renew.inactive {
   background: url('http://f.cl.ly/items/3G0u3N0P3L283I3q0j1m/inactive.png') no-repeat 42px center #c9c9c9; 
}

.btn {
  position: absolute;
  right: 5px;
  top: 4px;
  display: block;
  height: 22px;
  width: 22px;
  border-radius: 50%;
  background: #FFF;
  -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .45);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .45); 
}

.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $('#auto-renew').click(function() {
   if ( $(this).hasClass('active') )
   {       
     $(this).find('a').animate({
       right: 38
     }, 100).html('off');
     $(this).removeClass().addClass('inactive'); 
   } else {
     $(this).find('a').animate({
       right: 5
     }, 100).html('on');
     $(this).removeClass().addClass('active');      
   }
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................