Skip to main content

Spicing up your buttons with rollover effects

Posted by kirillcool on November 22, 2006 at 7:52 PM PST

One of the main source of ideas for new features in Substance is the community. And not only the explicit user requests. I try to stay updated on the latest trends, tricks, gadgets and what-nots in the UI area (this is probably the most important piece of advice i mention in the How to write a custom look and feel article on java.net. When i run the Aerith the first time, one of the more interesting UI tricks were the "image ghosting" (for the lack of better description) effects on button icons - when you rollover the button, the icon has an expanding fading-out ghost image. And recently, i saw this Beryl clip (i highly recommend checking out some of the effects that can be achieved with this engine) that pretty much shows the same thing.

So, after a few minutes of playing with the button UI delegates, this has been added to the latest dev drop of version 3.2 (code-named Iowa). Here is a screencast (it's somewhat jaggy sometimes, so you're more than welcome to launch the WebStart as well):

And here's the test application. Just move the mouse over the buttons and let me know how it feels.

I'd appreciate hearing your thoughts on the following subjects. Is it too pervasive and distracting to have it enabled by default? Should it be more transparent? Should it be faster (the demo shows the SLOW speed to demonstrate the effect, this is twice as slow as the default speed)? Should i add a "pulsating" effect - as long as the mouse stays over the button, have this effect happen every 3-4 seconds? Anything else?

Related Topics >>