How to add a button with the shadow?

Store Design
,

Topic summary

A user seeks guidance on replicating a button design with shadow effects from an external website for their Shopify store.

Solution Provided:

  • Access theme code via Online Store > Themes > Actions > Edit Code
  • Locate theme.scss.liquid or styles.css file
  • Add custom CSS with properties including:
    • Background color and rounded borders (border-radius)
    • Shadow effect using box-shadow property
    • Hover states for interactive feedback
  • Insert HTML button code (<a> tag with custom class) in theme templates
  • Customize colors, padding, and shadow values to match branding

Additional Responses:

  • A community moderator requested the store URL and password (if applicable) to provide direct assistance
  • Another user acknowledged the design appeal with a general comment

The discussion remains open, awaiting the original poster’s store details for more tailored support.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

I like this site very much https://greggspricemenu.co.uk and the design of the button, I want to learn how can I make button li

1 Like
2

Hey there! I totally get why you love that button design. It’s clean, eye-catching, and has a nice shadow effect that pops. To create a similar button with a shadow on your Shopify store, you can tweak your theme’s CSS. Go to Online Store > Themes, find your theme, click “Actions” > “Edit Code,” and look for the theme.scss.liquid or styles.css file. Add this CSS code to style your button:

.custom-button {
background-color: #007bff; /* Blue like theirs /
color: white;
padding: 10px 20px;
border-radius: 15px; / Rounded edges /
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); / Subtle shadow */
text-decoration: none;
display: inline-block;
}

.custom-button:hover {
background-color: #0056b3; /* Darker blue on hover /
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); / Slightly larger shadow on hover */
}

Then, in your theme’s template or section (like button.liquid or a custom liquid section), add this HTML where you want the button: Order Now. Adjust the colors, padding, or shadow values to match your brand, and test it in the theme customizer to see it live

3

Hey @britainfoodie

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

4

Welcome to the community!
Adding a button with shadow gives your website a modern, eye-catching look just like how Panda Express makes its menu visually appealing and easy to explore. Clean design and easy navigation, paired with flavorful options, make both the web and dining experience more enjoyable.