CSS Code Example
.btn-3d {
width: 120px;
height: 120px;
border-radius: 50%;
background: linear-gradient(145deg, #4facfe 0%, #00f2fe 100%);
box-shadow:
0 8px 15px rgba(79, 172, 254, 0.3),
0 15px 35px rgba(0, 242, 254, 0.2),
inset 0 -8px 15px rgba(0, 0, 0, 0.15),
inset 0 8px 20px rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
}
.btn-3d:hover {
transform: translateY(-5px);
box-shadow:
0 12px 25px rgba(79, 172, 254, 0.4),
0 20px 45px rgba(0, 242, 254, 0.3),
inset 0 -8px 15px rgba(0, 0, 0, 0.15),
inset 0 8px 20px rgba(255, 255, 255, 0.4);
}
.btn-3d:active {
transform: translateY(2px);
box-shadow:
0 4px 10px rgba(79, 172, 254, 0.3),
0 8px 20px rgba(0, 242, 254, 0.2),
inset 0 -4px 10px rgba(0, 0, 0, 0.2),
inset 0 4px 10px rgba(255, 255, 255, 0.2);
}
Key Features
Realistic 3D Effect
Multiple box-shadows create depth with both outer shadows and inset highlights for a true 3D appearance.
Gradient Colors
Linear gradients provide smooth color transitions that enhance the 3D effect.
Interactive States
Hover and active states with transform animations make the buttons feel pressable.
Multiple Sizes
Easily customizable sizes from small to large to fit any design need.
Icon Support
Works perfectly with icon libraries like Ionicons for modern UI designs.
Responsive
Fully responsive and touch-friendly for mobile devices and tablets.