Read also my Blog article about this.
Below you see two buttons with an animated 3D push effect. They are focusable by keyboard navigation, when you now press the TAB key, the green button should have the focus, rendered as deep yellow background color. Both ENTER and SPACE keys would push the button when focused; mind that SPACE key would also scroll down the page, and thus move the mouse out of the button, so better use ENTER for tests.
Actions |
Expected Results |
|---|---|
| Move mouse over green button | Button background gets light yellow (hover color), animated |
| Press left mouse over button, hold | Background gets deep yellow (focus color), text color changes to dark red, animated 3D lowering effect |
| Release left mouse over button | Text color changes back to original, animated 3D raising effect, but not before releasing mouse |
| Move mouse over blue button | Background gets light yellow, animated, green button background changes back to original |
| Move mouse out of blue button | Background changes back to original, animated |
| Press TAB to move focus to blue button | Background gets deep yellow (focus color) |
| Press and release right mouse over button | No effect |
| Press left mouse over button | Text color changes to dark red, animated 3D lowering effect |
| Drag mouse out of button while pressed, release | Text color changes back to original, animated 3D raising effect, as soon as mouse leaves the button |
| Press and release ENTER key | Same as "Press left mouse" and "Release left mouse" |
| Press and hold left mouse over button, press TAB key | Button background changes back to light yellow (hover color) |
| Press left mouse on button, press ENTER key, hold both | Same as "Press left mouse" |
| Release left mouse while holding ENTER key | No effect |
| Again press left mouse, then release ENTER key | No effect |
| Release left mouse (none is pressed any more) | Same as "Release left mouse" |
| Press left mouse over button, hold | Same as "Press left mouse" |
| Press ENTER, hold | No effect |
| Drag mouse out of button while pressed, release | No effect |
| Release ENTER key | Same as "Release left mouse" |
| Press left mouse over button, hold | Same as "Press left mouse" |
| Press ENTER key, hold | No effect |
| Release left mouse | No effect |
| Click left mouse outside button while holding ENTER | Same as "Release left mouse", and both text and background colors change back to original |
ɔ⃝ Fritz Ritzberger, 2018-01-25