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

Custom Button Text Color


Recommended Posts

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

Link to comment
  • Replies 12
  • Created
  • Last Reply

Top Posters In This Topic

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
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;

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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?

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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


×
×
  • Create New...