How can I use :hover with multiple classes - html

Question

I've got a css buttons style and some predefined colour styles. I use colour classes to colour things the same colour and a button style to make the buttons round.
How do I add a hover style to my buttons to change the colour to a lighter shade? I thought it would be as simple as .class class2:hover {etc} but it doesn't work for some reason.
Here's a fiddle I prepared to demonstrate:
http://jsfiddle.net/7n4Wy/
HTML
<p class="red button">Test</p>
<p class="blue button">Test</p>
<p class="red"> Not a button </p>
CSS
.red {
background: red;
}
.blue {
background: blue;
}
.button {
border-radius: 6px;
}
.button:hover .red:hover {
background: pink;
}

Answer 1

What you have is trying to match .red:hover that is inside .button:hover, which implies a nested element in your markup.
Since you're selecting the same element, you need to combine both classes with a single :hover:
.red.button:hover {
background: pink;
}
Updated fiddle

Answer 2

You can apply a CSS-rule to multiple selectors (classes like «.button», or states like «:hover») by separating them with a comma.
therefore just add a comma:
.button:hover, .red:hover {
background: pink;
}

Answer 3

Use following code JSFIDDLE
.button.red:hover {
background: pink;
}

Answer 4

To apply multiple classes, don't add a space (just use another period):
CSS
p.button {
border-radius: 6px;
}
p.red {
background: 6px;
}
p.button.red:hover {
background: pink;
}
HTML
<p class="button red">Hover Here</p>
The space is used to denote a child element. i.e. p.button red:hover would affect all elements with class red on hover that are wholly contained in parent paragraphs with class button.