Microinteractions - IDM241

Trigger

• Hover On/Off Button
• Click On/off Button

Rules

Frontend

Hover Trigger

• Hover On Button
• Background color changes to #ffdf75 with a box-shadow of 3px along the bottom in #ffffffc5
• Cursor changes from default to pointer
• Hover Off Button
• Background color changes to #ffc915 with no box-shadow
• Cursor changes from pointer to default

Click Trigger

• Click On Button
• Background color changes to #002f6c with a box-shadow of 5px along the bottom in #ffffffc5
• Cursor changes from pointer to progress
• Button translates 11px down from original position.
• Leads to the image's learn more page
• Click Off Button
• Background color changes to #ffc915 with no box-shadow
• Cursor changes from progress to pointer
• Button translates 11px up to original position.
• Button text changes to a loading spinner that is rotating

Backend

Click On Button

• When clicked, system checks what link is connected to specific button.
• Creates a 230ms delay between clicked button and page loading.

FeedBack

Frontend

Hover Trigger

• Hover On Button
• Background color changes to #ffdf75 with a box-shadow of 3px along the bottom in #ffffffc5
• Cursor changes from default to pointer
• Hover Off Button
• Background color changes to #ffc915 with no box-shadow
• Cursor changes from pointer to default

Click Trigger

• Click On Button
• Background color changes to #002f6c with a box-shadow of 5px along the bottom in #ffffffc5
• Cursor changes from pointer to progress
• Button translates 11px down from original position.
• Leads to the image's learn more page
• Click Off Button
• Background color changes to #ffc915 with no box-shadow
• Cursor changes from progress to pointer
• Button translates 11px up to original position.

Loops/mode

• When button is clicked, Learn more page displays