Solved
How to change the color of the button on hover? The below code is not working
.Skin #Buttons #NextButton:hover{
background-color:pink;
color-blue;
}
Best answer by Matt_Christie_Walker
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.
+5Just 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;
}
+5Can 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.
+5Looking 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.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.