An easily overlooked Button Element feature is the Button Hover Transition option. This option is found at the very bottom of the Design Tab, and allows you to set specific transitions for your buttons on hover.
There are eight button hover transition effects available.
Text Slide Up – With this transition, the original text slides up and fades, and is replaced by text fading in from the bottom.
Text Slide Down – This is the opposite of the above transition, with the text sliding down.
Underline – A subtle transition, this just underlines the text, which disappears on hover.
Icon Slide – This is similar to the Text Slide effect, but here the original icon disappears, while a new one slides in from the left or the right, depending on icon position. Obviously, for the icon effects to work, an icon must be set.
Icon Switch Position – Here, the icon fades out to the side it is set on, while a new icon slides in from the opposit side of the button text. This effect will not work when icon dividers are used.
Icon Rotate – This effect is pretty simple. The icon rotates 360 degrees upon hover, and back again on release.
Background Slide Right – This effect controls the background of the button, with the Gradient Start and End colors sliding in from top left to bottom right on hover.
Background Slide Left – This effect is the opposite of the one above.
