Overview

3D Key Switch is a lightweight HTML and CSS component that creates a realistic mechanical button effect using layered shadows, gradients and press animation. It simulates tactile keyboard feedback without JavaScript.

Features

• Pure HTML and CSS component
• Realistic 3D press animation
• Hover lift effect
• Neumorphic shadow styling
• Custom size using CSS variables
• No JavaScript required

Quick Start

1. Download the component.
2. Copy HTML structure into your project.
3. Include the provided CSS styles.
4. Customize width, height and colors.

Basic Markup

<div class="key3d">
 Enter
</div>

Usage Example

:root{
 --width:10rem;
 --height:5rem;
}

.key3d{
 background:
 linear-gradient(
 135deg,
 #fff,
 #d3d3d3
 );
}

Press Effect

.key3d:active{
 transform:translateY(5px);
 color:green;
}

API (CSS Variables)

• --width
  Button width.
• --height
  Button height.
• --paddingX
  Horizontal spacing.
• --paddingY
  Vertical spacing.
• --border-radius
  Corner roundness.

Example Sizes

Small
--width:6rem;
--height:3rem;

Medium
--width:10rem;
--height:5rem;

Large
--width:14rem;
--height:6rem;

Use Cases

• Virtual keyboard UI
• Control panels
• Calculator buttons
• Game interfaces
• Interactive switch components

Download