---
title: "3d Switch Button — Framer component · Best of Framer"
description: "$3.00 · Framer component · by Troy Miller · Buttons. 3D Switch Button Transform your Framer projects with this stunning 3D toggle switch that brings depth and realism to your user interfaces."
canonical: "https://framer.elliotli.dev/component/3d-switch-button"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/3d Switch Button

# 3d Switch Button

Hyper realistic toggle button

[View on Framer](https://framer.com/marketplace/components/3d-switch-button/?via=elliot-li)

![3d Switch Button preview image 1](https://framer.elliotli.dev/og/component/3d-switch-button/c501fb137e1aaa14/1600x1200.jpg)

## Summary

3D Switch Button Transform your Framer projects with this stunning 3D toggle switch that brings depth and realism to your user interfaces.

## Description

3D Switch Button

Transform your Framer projects with this stunning 3D toggle switch that brings depth and realism to your user interfaces.

## ✨ Features

**Realistic 3D Perspective** Experience true depth with perspective transforms that make the switch feel tangible. The button physically rotates when toggled, creating an immersive interaction that stands out from flat UI elements.

**Dynamic Light Effects** When activated, the switch glows with a mesmerizing light effect that includes a subtle flickering animation, simulating real electrical illumination. The glow transitions smoothly and adds polish to every interaction.

**Fully Customizable Colors**

-   **Button Color** - Choose any color and watch as the component automatically generates perfectly matched darker shades for depth and realism
    
-   **Glow Color** - Customize the active state glow to match your brand or design system
    

**Smooth Animations** Built with carefully tuned cubic-bezier timing functions for natural, satisfying transitions. Every click feels premium and responsive.

**Event Handling** Connect the onValueChange event handler to trigger actions, update variables, or control other elements in your Framer project when the switch toggles.

## How to Use

1.  Drag the component onto your canvas
    
2.  Resize using the frame handles (maintains quality at any size)
    
3.  Customize colors in the property panel
    
4.  Set the default state (on/off)
    
5.  Connect the onValueChange event to your interactions
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-u3k0thyy-zVrqoR55Ucos24NStscBLugN2zF1mR)

**IMPORTANT:** Due to the nature of digital code components, **all sales are final and non-refundable**. Once purchased, you receive immediate access to the complete component code, which cannot be returned.

**Before purchasing, please:**

-   Review the component demo and documentation carefully
    
-   Check the feature list to ensure it meets your needs
    
-   Contact us at troy@fireislanddesign.com with any pre-purchase questions
    

For design work, questions, or help, please reach out at [https://www.fireislanddesign.com/](https://www.merokeeventures.com/)

## Rank history [How rankings work →](/terms#rankings)

-   All · #8592

## Details

- **Author**: Troy Miller
- **Price**: $3.00
- **Published**: 2026-01-12
- **Updated**: 2026-06-17
- **Added**: 2025-12-24
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything