bahavior.js

MyApp.ButtonBehavior = SC.Behavior.extend({

    target: 'MyApp',
    action: 'doSomething',

    initialHandler: 'mouseUpNotOver',

    mouseUpNotOver: SC.State.extend({
      mouseEntered: 'mouseUpOver'    
      // no class name applied (in active)
    }),

    mouseUpOver: SC.State.extend({      
      classNames: 'hover',
      mouseDown: 'mouseDownOver',
      mouseExited: 'mouseUpNotOver'
    }),

    mouseDownOver: SC.State.extend({
      classNames: 'active over',
      mouseExited: 'mouseDownOut',
      mouseUp: function(e) { this.performAction(); this.transitionTo('mouseUpOver'); }
    }),
    
    mouseDownOut: SC.State.extend({        
      classNames: 'active out',
      mouseEntered: 'mouseDownOver'
    })

});