On/Off Toggle Switch using CSS and JQuery

In this post, we are going to design an On/Off Toggle Switch using HTML, CSS and JQuery.

Full Source Code for On/Off Toggle Switch :

<style type="text/css">
  .onoff{
    height: 20px;
    padding:2px 5px;
    color:#fff;
    border-radius: 5px;
    width:70px;
    text-align: center;
    margin-bottom: :20px;
    margin-top:20px;
  }
  .onoff-on:before{
    content: 'ON';
  }
  .onoff-off:before{
    content: 'OFF';
  }
  .onoff-on{
    background-color: #00a65a;
    border-color: #008d4c;
    border-right: 70px solid #ddd;
    cursor: pointer;
  }

  .onoff-off{
    background-color: #f56954;
    border-color: #f4543c;
    border-left: 70px solid #ddd;
    cursor: pointer;
  }
</style>

<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>

<h1 style="text-align:center;">On/Off Toggle Switch using CSS and JQuery</h1>

<div class="wrapper">
  <div class="onoff onoff-on"></div>
  <div class="onoff onoff-off"></div>
</div>

<script type="text/javascript">
  $(document).on('click','.onoff',function(){
    $(this).toggleClass('onoff-on');
    $(this).toggleClass('onoff-off');
  });
</script>

You can follow this video for full guidance :