If in our simple-shaped button, we’re combining icons and text we want to make sure that the icon is placed logically with regards to the action that we want the user to perform.
For example, on a button that takes us to the next page, we want an arrow icon to appear after the text. As if to say “click here and then THIS will occur”.
If we’re designing a button to assist users in returning to the top of the page, the upward-pointing arrow should appear above the text.
Whether you’re using text, icons, or both, the last thing we want to do is cram our content into the buttons surface.
Some suggest leaving a border of 25 pixels surrounding the button’s label.
But I find that a great rule of thumb, is to leave clear space around the content of the button at the height and width of a character or icon that we’re using. As for the size of an icon placed alongside text, again, keeping the icon the same size as the text or a little larger, is the way to go.
As for the size of the button itself, I suppose the toughest decisions are for mobile screens. This is especially true if our design process or workflow is Mobile First. Once we’ve figured out the size of our button for responsive view, we can scale it of for desktop
There are recommendations from the industry giants: Apple suggests that for mobile designs, main buttons, or call-to-action buttons, should be at least 44 x 44 pixels. Microsoft recommends using slightly smaller buttons, of 34 x 26 pixels.
Keep reading the article at Elementor Blog. The article was originally written by Simon Shocket on 2020-02-03 12:52:54.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.