Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

• 8 buttons, 1 page, 8 different button colors


Jcshugrue

Question

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!

Link to post
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

#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; } #b

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.

Posted Images

5 answers to this question

Recommended Posts

  • 0
Posted (edited)
#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.

Edited by rwp
Link to post
  • 0

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

Screen Shot 2020-07-08 at 4.58.44 PM.png

Screen Shot 2020-07-08 at 4.58.57 PM.png

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

 

Link to post
  • 0
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!

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...