Just a small syntax issue:



`color-blue;`



should be:



`color:blue;`



.Skin #Buttons #NextButton:hover {

background-color:pink;

color:blue;

}

---

@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;

}

---

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.

---

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 ;

}



That should get you going I think.

---