• 8 buttons, 1 page, 8 different button colors

Site URL: https://jackshugruedesign.com

Hi everyone- I'm hoping someone can help me with my website. 

I am using the SUHAMA template, and on my Home page I have 8 individual buttons that link to their own particular work page. I want to customize the button colors to match the most prominent color of the work it corresponds with. For instance, I want the "Hoops" button on the Home page to be the same orange as the basketball thumbnail that pops up when you hover with your cursor over "Hoops" from the Work page. 

So, I want all buttons to have their own color! I can provide HEX color codes or any other pertinent information to make this work!

Thanks everyone!

#block-yui_3_17_2_1_1591046471157_19938 .sqs-block-button-element {
    background-color: green;
}

#block-yui_3_17_2_1_1591052092299_24639 .sqs-block-button-element {
    background-color: red;
}

#block-yui_3_17_2_1_1591052494308_19109 .sqs-block-button-element {
    background-color: blue;
}

#block-yui_3_17_2_1_1591052092299_27864 .sqs-block-button-element {
    background-color: yellow;
}

#block-yui_3_17_2_1_1591052092299_31447 .sqs-block-button-element {
    background-color: pink;
}

#block-yui_3_17_2_1_1591575769482_11090 .sqs-block-button-element {
    background-color: purple;
}

#block-yui_3_17_2_1_1591052494308_16927 .sqs-block-button-element {
    background-color: orange;
}

#block-yui_3_17_2_1_1591081825106_10092 .sqs-block-button-element {
    background-color: gray;
}

That's in order down the page, change the color to the hex code you want. IE change gray; to #cccccc;

Dont forget the semicolon. If you want to change the font color, add a new line that says

color: black;

right under the blackground color line.

Hey I'm having a similar issue with changing a button color. On the hover its just black and can't see the text I've tried for hours and nothing. 

my site is https://www.tribeandsol.com I have custom coding for a megamenu (not sure if that's the problem) I want it to look like the other button on my sites homepage except black and when you hover its solid black with white text on help us bloom. Thanks

.no-touch .primary-button-style-outline .white .sqs-block-button-element--small:hover {
    background-color: red !important;
}

2 hours ago, rwp said:

.no-touch .primary-button-style-outline .white .sqs-block-button-element--small:hover {
    background-color: red !important;
}

 

It worked, thank you so very much!

Change red to whatever you need, of course. I just use red because it stands out and is easy to type while testing.