Quinn Kessler

[ Pinterest · Save Button ]

Alpha Build

Board ▾ Save Saved ↑

Hover the pin, hover the Board button, then click Save.

SOURCE:

pinterest.com

Log in, then hover any pin on the Home feed.

TRIGGERS:

• Pin (image)
  • Hover ON
  • Hover OFF
• Board Button
  • Hover ON
  • Hover OFF
• Save Button
  • Hover ON
  • Hover OFF
  • Click ON

RULES:

• Pin (image):
  • Hover ON
    • Dark gray overlay fades in over the image
    • Board button with a down arrow appears top left
    • Red Save button appears top right
    • Share icon appears bottom right (white rounded square, black arrow)
  • Hover OFF
    • Overlay fades out
    • Board button, Save button and share icon disappear
• Board Button:
  • Hover ON
    • Cursor changes to Finger
    • Gray rounded background appears behind "Board" and the down arrow
  • Hover OFF
    • Cursor changes back to default
    • Gray background disappears
• Save Button:
  • Hover ON
    • Cursor changes to Finger
    • Button turns a darker red
  • Hover OFF
    • Cursor changes back to default
    • Button goes back to normal red
  • Click ON
    • Pin is saved to the board shown on the Board button
    • Database updated with the pin added to that board
    • Button background changes from RED to BLACK
    • Button text "Save" changes to "Saved"
    • Down arrow on the Board button disappears
    • Board name becomes an underlined link to the board
    • That board stays the default board for the next save

FEEDBACK:

• Pin (image):
  • Hover ON
    • Dark gray overlay fades in over the image
    • Board button with a down arrow appears top left
    • Red Save button appears top right
    • Share icon appears bottom right (white rounded square, black arrow)
  • Hover OFF
    • Overlay fades out
    • Board button, Save button and share icon disappear
• Board Button:
  • Hover ON
    • Cursor changes to Finger
    • Gray rounded background appears behind "Board" and the down arrow
  • Hover OFF
    • Cursor changes back to default
    • Gray background disappears
• Save Button:
  • Hover ON
    • Cursor changes to Finger
    • Button turns a darker red
  • Hover OFF
    • Cursor changes back to default
    • Button goes back to normal red
  • Click ON
    • Button background changes from RED to BLACK
    • Button text "Save" changes to "Saved"
    • Down arrow on the Board button disappears
    • Board name becomes an underlined link to the board

LOOPS & MODES:

NA