Different coloured buttons in product description

Store Design
, , ,

Topic summary

Main issue: Add three buttons in product descriptions with different colors (placed below the Add to Cart button). Current setup uses a single .button CSS rule, making all buttons the same color.

Proposed solutions:

  • Use inline styles on each button to set distinct background and text colors for each.
  • Alternatively, target each button via specific CSS selectors (IDs or classes) if not using inline styles.

Clarifications:

  • Inline styles override the shared .button CSS color settings, so removing the color from the global style block is optional.
  • No store link was ultimately needed after trying the inline approach.

Outcome:

  • Inline styles were implemented and confirmed to work; the user achieved different colored buttons.

Status: Resolved. No further actions requested.

Key terms:

  • Inline styles: CSS written directly in the HTML element’s style attribute, affecting only that element.
  • CSS selectors: Patterns (like classes/IDs) used in stylesheets to target specific elements for styling.
Summarized with AI on January 16. AI used: gpt-5.
1

I was wanting to add buttons to my product descriptions and I found this old thread (link below) which provided the html to do so. I want to have 3 buttons at the top of the product description (but below the ‘add to cart’ button) and i’m not sure what changes to the html i would need to do to be able to specify different colours for each one? Currently they are all the same colour -----

Screenshot 2023-10-09 at 1.11.02 pm.png
Screenshot 2023-10-09 at 1.11.02 pm.png2664×1198 532 KB

I used the html provided by May in this old thread: https://community.shopify.com/topic/451158

This is the HTML example from the thread that I used to create the buttons.

Screenshot 2023-10-09 at 1.12.14 pm.png
Screenshot 2023-10-09 at 1.12.14 pm.png1602×1146 167 KB

Does anyone know what I need to change to be able to have different colours for each of the 3 buttons?

Thanks!

2

You need to target each individual button with CSS selectors. Can you provide the link to your store?

Or use inline styles like Dan suggested :grinning_face_with_smiling_eyes:

3

Hi @PaperMinx

You can add an inline style to each button example like this to add different color buttons.

your button name
4

Thank you! I’ll give that a try. Do i then remove the colour part of the style coding that I currently have at the bottom of the description. This part…

1 Like
5

Thank you. I’ll try the inline styles first and if I can’t work that out i’ll let you know the link and look into CSS selectors.

1 Like
6

Style inline will override the color in that code so you can remove it or not.

7

Oh fantastic, I just tried it and it worked! Thanks so much.

1 Like
8

Happy I could help!