Custom Button Text Color

Site URL: https://www.therumkitchen.com/home-2-1

Hello there, 

I'm trying to edit button styles and I stuck - it seems like css code doesn't respond to color changes. I'm trying to edit text on yellow button from white to black. Here's the code:

 

  /**Button Small**/

.small-button-style-outline .sqs-alternate-block-style-container .sqs-block-button .sqs-block-button-element--small:hover {
    background-color: #fff;
    color: #fff;
}
.small-button-shape-pill .sqs-block-button .sqs-block-button-element--small, .medium-button-shape-pill .sqs-block-button .sqs-block-button-element--medium, .large-button-shape-pill .sqs-block-button .sqs-block-button-element--large{
    border-radius: 0px;	
 	border-style:none;
    font-family: Signpainter;
}

.small-button-style-outline .sqs-alternate-block-style-container .sqs-block-button .sqs-block-button-element--small {
  background-colour: none !important;
}
.small-button-style-outline .sqs-alternate-block-style-container .sqs-block-button .sqs-block-button-element--small:hover {
    background-color: transparent;
}
.small-button-style-outline .sqs-block-button .sqs-block-button-element--small{
	border-radius: 0px;	
 	border-style:none !important;
  	background-color: #000;
  	color: #000000;
    margin: 0 auto;
    margin-top: 15px;
    width: 200px;
    font-family: Signpainter;
    font-size: 18px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 8px;
    padding-bottom: 15px;
    background: url(https://static1.squarespace.com/static/5d4bea07a49c3800010ddaf6/t/5d72757494c66e0001f1fc67/1567782260166/button-yellow.png);
        background-repeat: repeat;
        background-size: auto;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: none;
    border-style: none;
}
.small-button-style-outline .sqs-block-button .sqs-block-button-element--small:hover{
    display: block;
    margin: 0 auto;
    margin-top: 0px;
    margin-top: 15px;
    font-family: Signpainter;
    font-size: 18px;
    colour: #fff;
    height: 18px;
    width: 200px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 8px;
    padding-bottom: 15px;
    background: url(https://static1.squarespace.com/static/5d4bea07a49c3800010ddaf6/t/5d7250a85d2fb30001f1ad37/1567772840707/button-black.png);
        background-repeat: repeat;
        background-size: auto;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: none !important;
  	border-style: none !important;
    text-align: center;
}

Will appreciate your help. 

Many thanks

Michal

Add to Home > Design > Custom CSS. Repeat for other buttons, replace with button block id

div#block-yui_3_17_2_1_1591015635370_11743 a {
    color: black;
}

Find Block ID with https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

Hi @tuanphan

Thanks for your response. It worked! However, I wonder if it's possible to for the font colour to change while you hover? 

Many thanks

Michal

37 minutes ago, inks said:

Hi @tuanphan

Thanks for your response. It worked! However, I wonder if it's possible to for the font colour to change while you hover? 

Many thanks

Michal

div#block-yui_3_17_2_1_1591015635370_11743 a {
    color: black;
}
div#block-yui_3_17_2_1_1591015635370_11743 a:hover {
    color: white;
}

All sorted! Thank you so much!

Is there a way of using this to change the colour of all the buttons on the page, at once, rather than targeting each one individually?

2 hours ago, Yviemarie said:

Is there a way of using this to change the colour of all the buttons on the page, at once, rather than targeting each one individually?

Yes. Possible. Can you share site url? We can check code easier

On 10/30/2020 at 2:58 PM, tuanphan said:

Yes. Possible. Can you share site url? We can check code easier

Thanks @tuanphan! I think I've done something, but please do let me know if there is a better/proper way of doing so. I'm still a newbie!

https://yocostudio.co.uk/hello

17 hours ago, Yviemarie said:

 

Thanks @tuanphan! I think I've done something, but please do let me know if there is a better/proper way of doing so. I'm still a newbie!

https://yocostudio.co.uk/hello

Try adding to Home > Design > Custom CSS

.button-block .sqs-block-button-element {
    background: red !important;
    color: green !important;
}

Hi @tuanphan would you be able to apply this to change the color of the button instead of the color of the button text?

On 1/5/2021 at 12:50 AM, Lindseykr4 said:

Hi @tuanphan would you be able to apply this to change the color of the button instead of the color of the button text?

you can remove color: green !important;

I seem to have no luck with changing the color of one button no matter how I try it. I am cuirrently suing the following CSS code - and it seems to do nothing.

#block-yui_3_17_2_1_1610133790439_570
.sqs-block-button-element--medium
{color:#ffd300 !important;}

Are there any obvious errors in that code?

6 hours ago, GES said:

I seem to have no luck with changing the color of one button no matter how I try it. I am cuirrently suing the following CSS code - and it seems to do nothing.

 

#block-yui_3_17_2_1_1610133790439_570
.sqs-block-button-element--medium
{color:#ffd300 !important;}

 

Are there any obvious errors in that code?

Try this

#block-yui_3_17_2_1_1610133790439_570 a
{color:#ffd300 !important;}

If it doesn't work, please share link to page where you use button. We can check easier