Triggers
- On share button hover
- On share button click
- On social link hover
- On social link hover off
- On exit button hover
- On exit button click
Rules
On share button hover:
- Cursor turns into a pointer
- Drop shadow forms around share button
On share button click:
- Share button expands out and down into modal
- Share button color change to grey
- "Share" slides to the top left and decreases in size
- Exit icon fades in on the top right and three social links fade in on the left side as button expands out
On social link (Facebook, Twitter, LinkedIn) hover:
- Underline slides in from left to the right under link
- Text italicizes
On social link (Facebook, Twitter, LinkedIn) hover off:
- Underline slides out from right to left
- Text fades back to normal
On exit button hover:
- Cursor changes into a pointer
On exit button click:
- Exit button and three social links fade out
- Modal contracts back into share button
- "Share" slides back to orginal positon, increases in size, and changes back to orginal color
Feedback
Same as rules.
Loops and Modes
- Modal with the three social links appear when the share button is clicked