How to change the color of the button on hover? The below code is not working | XM Community
Solved

How to change the color of the button on hover? The below code is not working

  • 10 May 2018
  • 4 replies
  • 296 views

Userlevel 1
.Skin #Buttons #NextButton:hover{
background-color:pink;
color-blue;

}
icon

Best answer by Matt_Christie_Walker 16 May 2018, 03:23

View original

4 replies

Userlevel 4
Badge +5
Just a small syntax issue:

`color-blue;`

should be:

`color:blue;`

.Skin #Buttons #NextButton:hover {
background-color:pink;
color:blue;
}
Userlevel 1
@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;
}
Userlevel 4
Badge +5
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.
Userlevel 4
Badge +5
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.

Leave a Reply