![]() ![]() Using uppercase text to distinguish a button from a nearby link can be a good idea. If your primary or brand color is red then you may need to choose a different color. ![]() Error - the color a button becomes when the action taken has not been successfully completedĪ simple rule is to make success buttons green and error buttons red.Success - the color a button becomes when the action taken has been successfully completed.Progress - when an action has been triggered but is still in the process of being completed.Disabled - A state in which the button cannot be interacted with.Hover - when a user is hovering over but has not yet clicked the button.Depressed - when a user is mid-click on a button just before the let go.Focus - allows for navigation via keyboards or other directional input devices.Default - this will be your primary button color. ![]() Mind your hit targetsīe mindful of the device your buttons will be viewed on and make sure that the size and spacing is finger friendly. Create room by making the button itself significantly larger than the size of the text within the button. You need to account for all the possible environments your button might be in as well as the variability in length of text you might encounter. If you want to go oval go all the way to 100px of roundness. If you want to go rounded stick with 3-4px of roundness. I use the Contrast app to test my designs for WCAG 2.0 compliance: Button radiusīe decisive with your radius roundness. It’s also important to choose colors with adequate contrast for most users. This is Part 4 of our UI Design in Practice Series Anatomy of a button Button colors All buttons are not created equal, but they can all look equally as good. ![]()
0 Comments
Leave a Reply. |