Looking at the CSS for that green Minimal-Green Theme, they're using `background` and combining things there instead of `background-color`, so try changing yours to:
/* change Next button's color and font color */
.Skin #Buttons #NextButton{
background:#BAD1ED ;
color:#145B82 ;
}
Can you start with a different base theme? It might make things easier for you. If not, you will need to:
1) preview your survey
2) inspect the button CSS in your browser
3) see which classes are responsible for button styling and override those in your custom css.
@Matt_Christie_Walker Thank You for the reply, I have tried the below code but the background color doesn't change on the buttons on or before hover, it always stays green, may be because of "Minimal - green" qualtrics theme? do you happen to a fix to this?
/* change Next button's color and font color */
.Skin #Buttons #NextButton{
background-color:#BAD1ED ;
color:#145B82 ;
}
/* change Next button's color and font color on hover */
.Skin #Buttons #NextButton:hover {
background-color:#145B82;
color:#FFFFFF;
}
/* change Submit button's color and font color */
.Skin #Buttons #SubmitButton{
background-color:#BAD1ED;
color:#145B82;
}
/* change Submit button's color and font color on hover */
.Skin #Buttons #SubmitButton:hover {
background-color:#145B82;
color:#FFFFFF;
}
/* change previous button's color and font color */
.Skin #Buttons #PreviousButton{
background-color:#145B82;
color:#145B82;
border-color: #BAD1ED;
border-width: 1px;
}
/* change previous button's color on hover */
.Skin #Buttons #PreviousButton:hover{
background-color:#BAD1ED;
}