In an era dominated by flat and minimalist design, the perfect button stands out by embracing skeuomorphism's best elements: depth, tactility, and visual hierarchy. This "plastic button" style is a modern take on 3D design, providing clear affordance and a delightful user experience.

Here is a step-by-step breakdown of the layers needed to create this effect, transforming a flat rectangle into a compelling call-to-action (CTA).

Step 1: Style the Base Button

Start with the fundamentals. The base of the button needs proper structure and visual weight:

  • Structure: Create a base frame with an inner text layer. Use Figma's Auto Layout, set the width to 'Hug' content, and a defined height (e.g., 52px height is suggested).
  • Typography: The text should be clear and high-contrast (e.g., white text with a bold weight on a colored background).
  • Fill: Apply a Linear Gradient fill instead of a solid color. This is the first step in creating a sense of volume and light.

Step 2: Add Two Subtle Drop Shadows (The Stroke Effect)

Drop shadows are key to lifting the button off the background and introducing a modern look. Two separate shadows are used for maximum effect:

  1. The Colored Shadow (Stroke): Add a subtle drop shadow with a small spread (e.g., 5px spread). This shadow should be the same color as the button, but slightly opaque (e.g., 30% opacity). This creates a stroke-like effect, giving the button boundary and emphasizing its color.
  2. The Light Shadow (Lift): Add a second, subtle drop shadow that is white (100% opacity) with a smaller spread (e.g., 4px spread). This layer of white further lifts the button, mimicking reflected light from the surface below.

Step 3: Add Two Inner Shadows (The Sleek 3D Effect)

Inner shadows are the secret weapon for a sleek 3D "plastic" look, smoothing out the gradient and adding depth:

  1. Top Inner Shadow (Highlight): Use a lighter, opaque inner shadow (e.g., White, 20% opacity) with a negative Y-position (e.g., Y-4). This simulates light hitting the top edge, creating a smooth, highlighted bevel.
  2. Bottom Inner Shadow (Depth): Use a darker inner shadow (e.g., Black, 20% opacity) with a positive Y-position (e.g., Y 4). This simulates shadow being cast on the inside bottom edge, defining the plastic's curvature and completing the 3D effect.

Beyond the Visual

A perfect plastic button isn't just visually appealing; it enhances UX. It clearly communicates interactability through its layered depth and allows for highly engaging hover and active states. Experiment with interactions to make the button feel satisfyingly tactile when clicked.