I want to combine two things in the list header in our product:
Sort highlight like Spotify. We have a small sorting arrow indicator, but adding a highlight to the header of the sorted column makes the sorting much clearer. You can click three times; two directions of sorting, and the third click removes the sorting, and thereby the highlight too.
Hover effect like windows explorer. We have a filter button that only shows when hovering the column. Without the hover effect on the column header, the button popping up in the right end would feel malplacé.
My question: How do I combine these two effects, graphically? Is there a standard or any examples of combining these two graphical effects? I have been experimenting with borders and gradients of different strength, but it ends up a mess.
The problem is that both these graphical effects changes the background image. I have to find a combination that can show both the hover and press effects "on top of" the sorted effect. I find it hard to find a way of designing background images that clearly shows what state the sorting is in, no matter where the user keeps her mouse.
In the image you see that the examples I found does not combine these effects.