how to overwrite button's non-hover state colour to grey, but when hover button show the colour (with css framework)
<p>I'm using semantic, they've colours class as below.</p>

<pre><code>&lt;button class='ui red button'&gt; hover me to change red &lt;/button&gt;
</code></pre>

<p>It show a red button with different shade when :active :hover and default state.</p>

<p>However I want the class colours only show on :hover state;
when not hover the button is overwrite <strong>grey</strong> colour.</p>

<p>Can this be done by adding one CSS class?</p>

<p><em>note: I don't want to duplicate every semantic colours class to achieve this result</em></p>