如何用纯CSS实现与参考图片样式一致的按钮？

Hey there! Let's work through getting that button to match your reference design. First, let's break down the small issues in your current code that are throwing off the look:

• The inset box shadows are creating an inverted "sunken" effect instead of the raised/embossed style you want
• The linear gradient is covering the entire button with the same dark overlay, which washes out the 3D texture
• There's no base background color defined—this is critical for grounding the button's visual style

Here's the adjusted CSS code that should align with your desired button:

.styled {
  border: 0 !important;
  line-height: 2.5;
  font-weight: bold;
  text-align: center !important;
  color: rgba(11, 44, 20, 255) !important;
  border-radius: 8px !important;
  padding: 5px 16px;
  transition: 0.2s all;
  /* Add a base background tone (tweak this to match your reference exactly) */
  background-color: #d2e8d3 !important;
  /* Subtle gradient to enhance the raised 3D effect */
  background-image: linear-gradient(to bottom right, rgba(255,255,255,0.4), rgba(0,0,0,0.1)) !important;
  /* Fixed inset shadows for the correct embossed look */
  box-shadow: 
    inset 2px 2px 3px rgba(255, 255, 255, 0.9),
    inset -2px -2px 3px rgba(0, 0, 0, 0.2),
    /* Optional outer shadow for extra depth */
    0 2px 4px rgba(0,0,0,0.1);
}

/* Add a pressed state for better interactivity */
.styled:hover, .styled:active {
  box-shadow: 
    inset -2px -2px 3px rgba(255, 255, 255, 0.9),
    inset 2px 2px 3px rgba(0, 0, 0, 0.2),
    0 1px 2px rgba(0,0,0,0.1);
  background-image: linear-gradient(to bottom right, rgba(0,0,0,0.1), rgba(255,255,255,0.3)) !important;
}

Key Changes Explained: #

• Base Background Color: Added a soft green base to complement your dark green text—swap #d2e8d3 for whatever color matches your reference button.
• Gradient Adjustment: Reversed the gradient direction and adjusted color stops to create a natural top-left highlight and bottom-right shadow, which sells the 3D raised look.
• Shadow Fix: Shrunk the inset shadow size (from 7px to 2-3px) and swapped the light/dark shadow positions to get the correct embossed effect. Added a subtle outer shadow for extra depth.
• Interactive State: Added hover/active styles to simulate a pressed button, making the component feel more tactile and responsive.

If your reference has specific details like a darker border or different shadow intensity, just tweak the shadow values or background color to match!

内容的提问来源于stack exchange，提问作者Atanu Roy