We designed an interactive component for advisors to complete as part of a four-step certification program.
Button States
🔸 Default state: Button has an unmarked checkbox
🔸 Hover state: Button turns gold with bold text and a drop shadow, making it “pop out.” This effect is applied to all buttons, indicating that advisors can complete steps in any order
🔸 Activated/clicked: Inner shadow shows the button is pressed, leading the user to the next step
🔸 After the step is completed, the button turns green with a checkmark and becomes slightly transparent to indicate it’s inactive