Different coloured buttons in product description

[PaperMinx]

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 -----

I used the html provided by May in this old thread: https://community.shopify.com/c/shopify-design/how-to-create-a-custom-link-call-to-action-button/td-...

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

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

Thanks!

[fadi_yousif]

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 😄

[PaperMinx]

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. 

[Dan-From-Ryviu · Accepted solution]

Hi @PaperMinx 

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

<a class="button" style="background-clor: #red;"...>your button name</a>

[PaperMinx]

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...

<style><!--

.button {

   background-color: #f0bfaf;

   color: #ffffff;

   font-size: 14px;

   padding: 5px 14px;

   text-align: center;

   display: inline-block;

   text-decoration: none;

   font-weight:bold;

}

.button:hover {

   background: #f0bfaf;

   color: #fff;

}

--></style>

[Dan-From-Ryviu]

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

[PaperMinx]

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

[Dan-From-Ryviu]

Happy I could help!