CSS rollover effects with RichFaces a4j:commandButton

Question

I've not seen a useful, authoritative web resource which says how to reliably enable rollover effects on a4j:commandButton elements in RichFaces JSF content.

I have found plenty of css resources re buttons, but then when they start talking about html I start wondering what the equivalent is in more recent web technologies.

Basically I want my buttons to look different on hover and then on click. I'd like to use images but client side js is out of scope for this q.

m

Answer 1

Use the following attributes as in this example below to your a4j:commandButton ( have a look at the full list (v3.3.1.GA)):

<a4j:commandButton value="Submit" styleClass="ctlBtn"
                                    id="myCtlBtn" type="submit" style="margin-bottom: 5px;"
                                    reRender="allMyOtherplaces"
                                    onmouseover="this.className='ctlBtn btnHover'"
                                    onmousedown="this.className='ctlBtn btnDown'"
                                    onmouseup="this.className='ctlBtn'"
                                    onmouseout="this.className='ctlBtn'"
                                    onclick="this.className='ctlBtn btnDown'"
                                    oncomplete="this.className='ctlBtn'" />

And create classes ctlBtn , btnHover and btnDown in your included .css file.