How can I use :hover with multiple classes

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