Interactive Rocker Switch ON/OFF Using HTML, CSS & JavaScript

The Rocker Switch ON/OFF is a simple interactive UI component built using HTML, CSS, and JavaScript. It recreates the appearance and behavior of a physical rocker switch, allowing users to toggle between ON and OFF states with a click.

This project is useful for developers who want to create modern toggle controls for dashboards, settings pages, smart-home interfaces, admin panels, and other interactive web applications.

The switch uses CSS transitions, 3D transformations, shadows, and color changes to provide visual feedback when the user changes its state.

Features

• Interactive ON/OFF rocker switch
• Pure HTML, CSS, and JavaScript
• No external libraries or frameworks
• Smooth transition animations
• 3D rocker-style visual effect
• Green glowing ON state
• Dark OFF state
• Click-based state switching
• Responsive and lightweight UI component
• Easy to customize colors, size, and animation

How the Rocker Switch Works

The component consists of a main .rocker-switch container with two sections:

<div class="rocker-top">ON</div>
<div class="rocker-bot">OFF</div>

The switch initially displays the OFF state. When the user clicks the switch, JavaScript adds or removes the on class:

const s = document.getElementById("rSwitch");

s.addEventListener("click", () => {
    s.classList.toggle("on");
});

The JavaScript controls the state, while CSS determines how the switch looks in each state.

HTML Structure

The HTML creates the basic structure of the switch:

<div class="stage">
    <div class="rocker-switch" id="rSwitch">
        <div class="rocker-top">ON</div>
        <div class="rocker-bot">OFF</div>
    </div>
</div>

The id="rSwitch" allows JavaScript to find the switch and attach the click event.

CSS Styling

CSS is used to create the physical rocker-switch appearance.

The main switch uses a dark background, rounded corners, a border, and a vertical layout:

.rocker-switch {
    width: 60px;
    height: 100px;
    background: #1f2937;
    border-radius: 12px;
    border: 2px solid #374151;
    padding: 4px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

The two sections occupy equal space using flex: 1.

The initial state also uses rotateX() transformations to create a subtle 3D effect.

.rocker-top {
    transform: rotateX(20deg);
}

.rocker-bot {
    transform: rotateX(-20deg);
}

ON State Animation

When the switch receives the .on class, the ON section changes to green and receives a glowing effect:

.rocker-switch.on .rocker-top {
    background: #10b981;
    color: #fff;
    transform: rotateX(0deg);
    box-shadow: 0 0 12px #10b981;
}

At the same time, the OFF section becomes darker:

.rocker-switch.on .rocker-bot {
    background: #1f2937;
    color: #6b7280;
    transform: rotateX(30deg);
}

The transition property creates a smooth animation between the two states.

JavaScript Functionality

The JavaScript implementation is intentionally simple:

const s = document.getElementById("rSwitch");

s.addEventListener("click", () => {
    s.classList.toggle("on");
});

classList.toggle() adds the on class when it is missing and removes it when it already exists.

This means the same click action can switch the component between ON and OFF without requiring complicated JavaScript logic.

Where Can You Use This Project?

This rocker switch can be used in many types of web applications, including:

• Smart-home dashboards
• Admin dashboards
• Website settings
• IoT interfaces
• Device control panels
• User preference settings
• Dark/light mode controls
• Notification settings
• Feature enable/disable controls
• Interactive UI prototypes

For example, an IoT dashboard could use the switch to represent whether a connected device is currently enabled.

How to Customize the Switch

You can easily modify the component to match your website design.

Change the Size

Modify the width and height:

.rocker-switch {
    width: 70px;
    height: 120px;
}

Change the ON Color

The green ON color can be replaced with another color:

.rocker-switch.on .rocker-top {
    background: #2563eb;
    box-shadow: 0 0 12px #2563eb;
}

Change the Border Radius

For a more rounded appearance:

.rocker-switch {
    border-radius: 18px;
}

Advantages of This Project

The Rocker Switch project demonstrates several useful frontend development concepts in a small component:

• DOM element selection
• JavaScript event handling
• CSS class manipulation
• CSS transitions
• 3D transformations
• Flexbox layouts
• Interactive UI states
• Visual feedback

Because it does not require any external dependency, it can be added to an existing HTML page with minimal setup.

Conclusion

The Interactive Rocker Switch ON/OFF is a lightweight frontend project that demonstrates how HTML, CSS, and JavaScript can work together to create an engaging user interface component.

HTML provides the structure, CSS creates the visual design and animation, and JavaScript controls the ON/OFF state. The project is simple enough for beginners while also providing a useful reusable component for more advanced web interfaces.

You can extend the project by connecting the switch to real application settings, APIs, databases, or IoT devices so that the visual ON/OFF state represents an actual system state.