<input type="checkbox" class="toggleButton"/>
.toggle-switch {
    margin:auto;
    margin-top: 80px;
    cursor:pointer;
    background:rgba(0,0,0,0.2);
    width:50px;
    height:20px;
    border-radius:15px;
    box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2) inset, 0px 0px 10px 0px rgba(0,0,0,0.1);
    overflow:hidden;
    position:relative;
}

.handle {
    position:absolute;
    top:0;
    left:0;
    border-radius:10px;
    background:rgba(230,230,230,1);
    box-shadow: 0px -1px 15px 0px rgba(0,0,0,0.05) inset,  0px 1px 15px 0px rgba(0,0,0,0.1);
    width:20px;
    height:20px;
}

.handle:hover, .off .handle:hover {
    background:rgba(220, 220, 220, 1);
}
View Compiled
/*
 * toggle-switch
 * https://bitbucket.org/QuBitProducts/toggle-switch/overview
 * created: 25 Apr 2013
 * alan@qubitdigital.com
 * Licensed under the apache license.
 */

(function () {

  //options

  function ToggleSwitch(element) {
    this.$checkbox = $(element);
    this.render();
    this.init();
  }

  ToggleSwitch.prototype.render = function () {
    this.$checkbox.hide();
    this.$el = $('<div class="toggle-switch"/>')
      .insertAfter(this.$checkbox);
    this.$handle = $('<div class="handle"/>')
      .appendTo(this.$el);
    this.init();
  };

  ToggleSwitch.prototype.init = function () {
    var self = this;
    this._val = this.$checkbox.is(":checked");
    this.$el.removeClass("on off")
      .addClass(this._val ? "on" : "off");
    this.$handle
      .draggable({
      containment: this.$el,
      stop: function (event, ui) {
        var newVal = ui.position.left > self.threshold;
        if (newVal !== self._val) {
          self.toggle();
        } else {
          self.position(self._val);
        }
      }
    });
    this.$el.off("click")
      .on("click", function () {
      self.toggle();
    });
    this.threshold = this.$el.outerWidth() / 2 - this.$handle.outerWidth() / 2;
    this.position(this._val, true);
  };

  ToggleSwitch.prototype.val = function (val) {
    if ((val || val === false) && val !== this._val) {
      this.toggle();
    }
    return this._val;
  };

  ToggleSwitch.prototype.position = function (val, immediate) {
    var self = this;
    var opts = {
      my: val ? "right center" : "left center",
      at: val ? "right center" : "left center",
      of: this.$el,
      using: immediate ? null : function (css) {
        self.$handle.animate(css, 50, "linear");
      }
    };
    this.$handle.position(opts);
  };

  ToggleSwitch.prototype.toggle = function () {
    this._val = !this._val;
    this.$el.toggleClass("on off");
    this.$el.trigger("change", [this._val]);
    this.$checkbox.trigger("click");
    this.position(this._val);
  };

  ToggleSwitch.prototype.destroy = function () {
    this.$checkbox.insertAfter(this.$el);
    this.$el.remove();
  };

  $.fn['toggleSwitch'] = function (options) {
    if ($.isFunction(ToggleSwitch.prototype[options])) {
      var plugin = $(this).data("toggleSwitch");
      return plugin[options].apply(plugin, Array.prototype.slice(1, arguments));
    }
    return this.each(function () {
      var plugin = $.data(this, 'toggleSwitch');
      if (!plugin) {
        $.data(this, 'toggleSwitch', new ToggleSwitch(this, options));
      }
    });

  };

  return ToggleSwitch;
})();

$('.toggleButton').toggleSwitch();
$(function() {
  $("#demo").toggleSwitch();
});

var color = ['d','5','d'];
setInterval(function(){
  color.unshift(color.pop());
  $("body").animate({
    "background-color": "#"+color.join("")
  }, 500);
}, 4000);
Run Pen

External CSS

  1. //ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js