How to add a button with the shadow?

Store Design
,
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

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.

6

the following sites are also making buttons like this https://missionbbqmenus.com/ https://habitburgermenus.com/

7

@britainfoodie ,

That site uses a styled <a> or <li> with CSS (rounded pill button, bold text, subtle shadow, hover effect). You can recreate it with simple HTML + CSS.

Basic example (button-like link)

replace the class with your website or

  • class.

    
.wp-block-kadence-advancedbtn .kb-btn121_ad95c5-46.kb-button:hover {
  color: var(--global-palette3, #1A202C);
  background: var(--global-palette1, #3182CE);
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  box-shadow: 15px 7px 5px 0px #000000;
}

.kb-button::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
  background: rgba(0,0,0,0);
}
.wp-block-kadence-advancedbtn .kb-btn121_ad95c5-46.kb-button:hover{
  color: var(--global-palette3, #1A202C);
}
.kb-button:hover::before, .kb-button:focus::before {
  opacity: 1;
}