Neumorphic Button

This button component implements the popular neumorphic design trend, creating a soft, extruded plastic effect that appears to rise from or be carved into the background. It uses carefully crafted box shadows to achieve the 3D appearance.

Features

• Neumorphic Design: Soft UI aesthetic with subtle 3D effects
• Interactive States: Different shadows for hover and active states
• Dark Mode Support: Adapts to dark mode with appropriate shadows
• Smooth Transitions: Animated state changes for better UX
• Responsive: Works on all screen sizes

Usage

To use this button, simply include the HTML and CSS in your project. The design relies heavily on box-shadow values to create the neumorphic effect, so ensure your container has a solid background color that matches the design (light gray for light mode, dark gray for dark mode).

Customization

You can customize the following aspects:

• Colors: Adjust the background color and shadow colors to match your theme
• Depth: Modify the shadow values to make the effect more or less pronounced
• Size: Change padding and font-size for different button dimensions
• Rounding: Adjust border-radius for different corner styles
• Transition: Modify the transition duration and timing function

Browser Support

This component uses standard CSS box-shadow and transitions, supported in all modern browsers and IE9+.

Design Considerations

Neumorphism can be difficult to implement with high accessibility standards as the subtle shadows may reduce contrast. Consider increasing contrast for text or adding a slight border for better visibility in production.