Jump to content

• 8 buttons, 1 page, 8 different button colors

Recommended Posts

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 comment
  • Replies 5
  • Created
  • Last Reply
#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.

Link to comment

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 comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.