What would be the default size to create buttons in the menu of websites, in different resolutions?

Question

I would like to get an idea of the size of buttons for websites in their respective resolutions, such as menu buttons, social buttons, question buttons, among others...

Do you have any information site on this topic?

Answer 1

There is no "pattern" of sizes. What exists are studies and recommendations, because variations of design between sites contain various types of sizes and shapes of buttons.

A very good article, which I translate here, brings several guidelines for the development of interfaces:

Consistency ("least surprising principle")

• Certain aspects of an interface must behave consistently at all times for all screens;
• Terminology should be consistent across screens;
• Icons should be consistent across screens;
• Colors should be consistent between screens of similar function;

Simplicity

• Break complex tasks into simpler tasks;
• Break long sequences in separate steps;
• Keep tasks easy, using icons, words, etc.;
• Use icons / objects that are familiar to the user;

Limitations of human memory

• Organize information into a small number of "pieces";
• Try creating short linear sequences of tasks;
• Do not flash important information on screen for considerable periods;
• Organize data fields to match user expectations, or to organize user input (for example, auto-formatted phone numbers);
• Provide helper clues / navigation for the user to know where they are in the software or at what stage they are in an operation;
• Provide reminders or warnings as appropriate;
• Provide continuous feedback on what is and / or just happened;
• Allow users to recognize instead of recall information;
• Minimize working memory loads by limiting the duration of sequences and amount of information - avoid icon mania.

Cognitive Guidance

• Minimize mental information transformations (for example, using "Ctrl + Shift + Esc +8' to rewind a paragraph);
• Use significant icons / letters;
• Use appropriate visual cues such as arrow keys;
• Use real-world metaphors whenever possible (e.g., desktop metaphor, paste metaphor, trash can metaphor, etc);

Feedback

• Provide informative feedback at appropriate points;
• Provide appropriate articulatory feedback - feedback that confirms the physical operation you have done (for example, I typed 'help' and 'help' appear on the screen). This includes all forms of feedback, such as auditory feedback (for example, a system beep, mouse click, key click, etc);
• Provide feedback with appropriate semantics - feedback that confirms the intent of an action (for example, highlighting an item to be chosen from a list);
• Provide appropriate status indicators to show the user progress with a long operation (for example, the copy bar when copying files, an hourglass icon when a process is running, etc);

System messages

• Provide user-centered text in messages (for example, "there was a problem copying the file to your disk" instead of "run error 159");
• Avoid ambiguous messages (for example, press 'any' key to continue - there is 'any' key and there is no need to press a key, rephrase to say "press Enter key to continue);
• Avoid the use of threatening or alarming messages (for example, fatal error, perform aborted, kill work, catastrophic error);
• Use specific, constructive words in error messages (for example, avoid general messages, such as "invalid entry" and specific usage, such as "Please enter your name");
• Make the system "take the blame" for errors (e.g., "illegal command" versus "unrecognized command")

Anthropomorphization

• Do not anthropomorphize (i.e., do not assign human characteristics to objects) - avoid messages from your computer as for example "Have a good day";

Modality

• Use modes cautiously - a mode is a state where the user interface has different actions than in other states (for example, changing the shape of the cursor can indicate whether the user is in an edit mode or a navigation mode);
• Minimize preference modes, especially irreversible preference modes - a preventative mode is one in which the user must complete a task before proceeding to the next. In a preventative mode other functions of the software are inaccessible (e.g., dialog boxes for saving files);
• Make user actions easily reversible - use 'undo' commands, but use them sparingly;
• Allow operation escape routes;

Heed

• Use techniques draw attention with caution (for example, avoid excessive use of blinking on web pages, displaying messages, 'you have mail', strong colors, etc);
• Don’t use more than 4 different font sizes per canvas;
• Use font with or without serif appropriately according to visual situation;
• Do not use all uppercase letters - use and mix uppercase letters / lowercase;
• Do not excessively use audio or video;
• Use colors appropriately and make use of expectations (for example, do not have a red color OK button (use green for OK), yellow for caution and red for 'danger' or 'stop');
• Don’t use more than 4 different colors on a screen;
• Do not use blue for text (hard to read), blue is a good background color;
• Do not put red text on a blue background (bad for color-blind);
• Use combinations of contrast colors;
• Use colors consistently;
• Use only 2 levels of intensity on a single screen;
• Use underline, bold, reverse video or other markers sparingly;
• On text screens do not use more than 3 fonts on a single screen;

Display problems

• Maintain inertia display - make sure the screen changes little from one screen to the next task within a functional situation;
• Organize the screen complexity;
• Eliminate unnecessary information;
• Use concise, unambiguous phrases for instructions and messages;
• Use easy to recognize icons;
• use a balanced screen layout - don’t put too much information at the top of the screen - to try to balance the information in each quadrant of the screen;
• Use plenty of "white space" around text blocks - use at least 50% white space for text screens;
• Group information logically;
• Structure the information instead of just presenting a narrative format (understanding can be 40% faster for a structured format);

Individual differences

• Accommodate individual differences in user experience (from beginner to computer literacy)
• Accommodate user preferences by allowing some degree of screen layout customization, appearance, icons etc
• Allow alternative ways for commands (for example, by selecting combinations of menu keys);

Answer 2

As far as I know, it doesn’t have a standard size, it will even depend on your design.

Often the button is not even a button in itself, but a word. These things depend a lot on where you’re going.

I recommend you practice for words like User Xperience, User Interface, User Design so you can understand better what standards the Web uses.

Stackexchange itself has a forum dedicated only to this subject, is the

UX Stackexchange