On/Off Toggle Switch using CSS and JQuery

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">
    height: 20px;
    padding:2px 5px;
    border-radius: 5px;
    text-align: center;
    margin-bottom: :20px;
    content: 'ON';
    content: 'OFF';
    background-color: #00a65a;
    border-color: #008d4c;
    border-right: 70px solid #ddd;
    cursor: pointer;

    background-color: #f56954;
    border-color: #f4543c;
    border-left: 70px solid #ddd;
    cursor: pointer;

<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>

<script type="text/javascript">


You can follow this video for full guidance :

ALSO READ  Rotate Car Using JQuery

Comments are closed.