Interaction / transactional button rules

Not posted in a while. Little something I'm working on for an ecommerce website. Getting quite nicely deep into button treatment, and more specifically rules for what colours to use when, and when to use a full vs outline colour.

Rules (so far):
1. Buttons are salmon outline as standard, and a dark brown/grey when they are secondary e.g. 'next' button would be the salmon, and a 'back' button would be grey/brown.

2. Buttons are outlined as standard, unless their event is a milestone of something completed e.g. having gone through 5 steps and add to basket.

3. The green (pictured) is used only for when we start the user journey for payment, so first step of this (again, pictured) is the add to basket. This green is then used all the way through the journey to guide the user on where they need to click to proceed.

More by Alloneword

View profile