Kirill Grouchnikov's Blog

Spicing up your buttons with rollover effects

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?

Comments

• Here is one effect from classic games you may like. So, some animation effects can run on default button (or maybe one currently selected). That of course should go only after considerable timeout...

  Posted by: euxx on November 22, 2006 at 08:59 PM

• In Aerith and our presentations we refer to this effect as the "spring" effect and it comes directly from Mac OS X.

  Posted by: gfx on November 22, 2006 at 11:51 PM

• Would is be possible to plugin various effects. e.g: fadein, fadeout, glow and so on.

  ~Lokesh

  Posted by: lshah on November 23, 2006 at 12:30 AM

• what about the very old dream: transparent JFrame?

  Posted by: felipegaucho on November 24, 2006 at 04:18 AM

• 
  The effect is interesting, but I think it's not very well used. Normally, if a user pushes a button, her expectation would be to have a little noticeable feedback (if at all) when hovering over a button and a very clear feedback when pushing it.

  However, with this demo it's the other way round. I see a big reaction when hovering and almost can't see a reaction when pushing a button.

  Maybe you should simply swap the effects.

  BTW: The buttons turn very dark when hovering, but that's probably nothing to do with the feedback.

  Posted by: christian_schlichtherle on November 24, 2006 at 07:45 AM

• Great job! Thanks Kirill.

  Posted by: gene9 on November 24, 2006 at 02:57 PM

• This is very cool, but the effect is a little too subtle. I had trouble noticing the change on some of the icons. Is there any way to push the effect outside the bounds of the button so that it overlays the parent container and the sister components?

  Posted by: aberrant on November 25, 2006 at 04:02 AM

• Runs nice there. The problem that the effect only be avaiable in the bounds of that button may makes it a bit unusable for real world scenarios.
  

  Posted by: mac_systems on November 26, 2006 at 06:00 AM

• Krill - VERY NICE!!!

  Posted by: tchangu on January 21, 2007 at 11:12 AM

• Cool!!!

  Posted by: sarathgj on March 16, 2007 at 05:28 AM

• Can i use this jar and library set for commercial projects also?

  Posted by: joypappy on July 20, 2007 at 03:08 AM

• joypappy - the license for Substance is BSD.

  Posted by: kirillcool on July 20, 2007 at 11:28 AM

This work is licensed under a Creative Commons License.