Trying to change TEXT color of survey buttons

Hi there,

i would say check the code again in CSS , its better to click Edit and open it in full screen and add your code.

Some time when you add the code in that small screen it does not take it.

For me below code worked like charm. and yours don't see any difference

.Skin #Buttons #NextButton{
background-color: #BA0B27;  /* This will change the Box colour of next button
color: #D8E12B; /* This will change the Text colour present inside the Next Button
}

However if you want to move per page based Button edit. i would recommend this post for reference.

Regards

Pratyush

Hi @klm999 

The code is working fine. I’m  able to change the color of my Next button.

Are you clicking on APPLY button at the bottom-right  after making the changes?

#navigation #next-button {
    background-color: #00ffff;
    color: #ff0000;
}

#navigation #previous-button {
    background-color: #00ffff;
    color: #ff0000;
}

This worked - somewhat. The results are not exactly as I expected. The little arrow on the next button stays black. Also, the back button’s text hasn’t changed.

I am using Simple layout so obviously the CSS code does not work exactly as it should.

Try using the below where the arrow/chevron colors are denoted by the svg fill. I also added some bits that change the button background-color on mouse hover. 

#navigation #next-button {
background-color: #5c7f92;
color: #ffffff;
}

#navigation #previous-button {
background-color: #5c7f92;
border: 0;
color: #ffffff;
}

#navigation #next-button svg {
fill: #ffffff;
}

#navigation #previous-button svg {
fill: #ffffff;
}

#navigation #next-button:hover {
background-color: #949494;
}

#navigation #previous-button:hover {
background-color: #949494;
}

Good morning from a sunny Sweden!

I am using this code, and I can not for the life of me impact the color of the text (expecting a white text on a green background).

.Skin #Buttons #NextButton{
background-color: #009844;  /* This will change the Box colour of next button
color: #ffffff; /* This will change the Text colour present inside the Next Button
}

Is there anywhere else that this can be set that overrides the code? 

Thanks in advance

-Mattias

Hi @MattiasM ! Try adding !importants to your CSS rules to ensure they override any other styling:

.Skin #Buttons #NextButton {
background-color: #009844 !important;  
color: #ffffff !important;
}

.Skin #Buttons #NextButton {
background-color: #009844 !important;  
color: #ffffff !important;
}

Thanks that solved it! 

.Skin #Buttons #NextButton {
background-color: #009844 !important;  
color: #ffffff !important;
}

!importants do the magic! I’ve been looking for a solution for several months. Thank you @Tom_1842 my hero 😎