The design of the button must be consistent throughout the design of the website. Designing the buttons externally in a UI kit document allows for constant designs throughout the website, as they can be easily duplicated and copied into the website.
Before my research, the buttons looked like this – based off designs I've created in the past. However, I find the changing solid colour is very in your face, the opposite of what I would want. My research lead be to create something more subtle, as seen below.
A more subtle button design, where the block colour of the button remains the same. Only the text changes colour upon roll over. Using the tan colour from the brand guidelines.
You can see the buttons implemented on the website. Using the tan for the roll over feature, to show the user their selection.
The animation of how the roll over will look, which will be implemented into the website animation.
Leave your comment