Buttons
A button should look like a button – in general, it means a rectangular background distinguished from the other elements on the page with a bold text inside it. A single-action word doesn’t look like a button – even if that action sits on its own, and it’s distinguishable. Include a background color and give it enough breathing room and if you add a drop shadow to reflect on the surface, it will look more clickable.
Color enforces action
Contrast should be used to help users choose between different buttons. Not being able to decipher between actions creates uncertainty for users and can slow down their journey, making for a poor user experience and quite possibly causing them to click away from your app.
Tap areas
Pressing a button should be a simple task, and if a user is unable to successfully tap on a button or tap on a neighboring element by mistake, it will lead to a negative experience and loss of time. For most platforms, consider making touch targets at least 48 x 48 px. A touch target of this size results in physical size of about 9mm, regardless of screen size. The recommended target size for touchscreen elements is at least 7-10mm. For icon buttons, make sure the touch target extends beyond the visual bounds of an element. This not only applies to mobile or tablet, but the same size recommendation also holds true for pointer devices on the web like a mouse.
Put them in the right place
Perhaps one of the biggest challenges of designing and including buttons is answering the age-old question of where you should put them. The best place to put a button is right next to or below whatever you think will prompt the user to click it — whether it’s the last field of a form or a shopping cart icon that will take them to your form. It would help if you also thought about expectations when deciding on button placement. For instance, the right side generally indicates progression, so if you include both a “Next” or “Submit” button and a “Back” or “Cancel” button, the former should go on the right-hand side and the latter should go on the left-hand side.
Destructive buttons
Think twice before creating a destructive button when trying to determine what you need a button for and where to place it. Destructive buttons can be a Cancel or a Reset button. How often would somebody need to reset all of the data they have entered and start all over again? Destructive buttons can get in the way of how many people will finish your form. If you place a reset button when people don’t expect it, they can click or tap on it accidentally. Do not make destructive actions the same color as your main call to action. Use a red, or a more warning color to convey a visual cue for warning because it captures attention easily.