When i design layouts i come across using the same width for buttons in my case hyperlinks shaped into a button, the issue is when assigning fixed width to maintain the size of buttons to be isometric is a pain to avoid text wrapping now as of modern browsers of today adding fixed width is futile and never good practice.
so what I am trying to ask is using % width better?
but when window shrinks at some stage text begins to warp or overflow so my question is when dealing with text or buttons how do we shrink text with the button or is there better approaches to be used with buttons?
most âcommonâ use is media queries for mobile is 100% which is full width now what about âlargerâ screens applying % width can become really drastic for example wide buttons for very little text. or small buttons with warped text.
is there any âgood practicesâ with resolving how hyperlinks/buttons work visually as we all know buttons play a very âimportantâ role in web design.
PS. the ââ is to show that its different opinions some may not say the same, these are big words to describe the content when it may not appear the same to everybody.
You certainly donât want to shrink button text as the screen gets smaller and in fact the opposite is true as readable text needs to be larger on mobile because it is harder to read. Anything under 16px on mobile is difficult to read. You also need bigger hit areas on mobiles to allow for fat thumbs.
It is pretty simple and straight forward to set media queries up to cater for these eventualities and there is no issue as such.
If you want to standardise all your button widths then I would not set a percentage width because percentages become too small very quickly (unless its 100%). Maybe set a minimum and maximum width and then you can use a percentage width combined with min/max to cater for most purposes.
In the end it depends on the design so there is no one right way as such. You just have to build with these things in mind but the tools are all there.
what iâd normally do is create a button with a set margin/padding and an auto width. Iâd then add max-width:100% this should cover most instances. When the screen is big the button will only be the size of the text plus the margin/padding, when the screen reduces size and hits the side of the button the max-width:100% will take over and prevent it overflowing the screen and will wrap the text (if thats what you want it to do).
As above adding in media queries at certain points can help with readability and ensuring it does what you expect it to at various screen sizes.
How often are you likely to have a button wider than 320px? which is a min screen size to aim for.
You guys all make valid points but what I am trying to say is:
That for instance If I was to make a button with âhomeâ than another with âMy Projectsâ and than add a width for example of 150px now lets say the âMy Projectsâ button is not fitting the width of the button and begins to warp and applying a larger width would make the âhomeâ button rediculously long if there was more content in the other button.
so for this:[quote=â0_0Nathan, post:1, topic:282413â]
most âcommonâ use is media queries for mobile is 100% which is full width now what about âlargerâ screens applying % width can become really drastic for example wide buttons for very little text. or small buttons with warped text.
[/quote]
Iâd understand media queries can be useful but also has pitfalls for instance removing some of the coding to cater for design can become quite disastrous when some other codes are dependent of it. my point is the large amount of text requires more space to avoid warping.
So are there methods to get a size fit for both buttons without warping or incredibly large widths for such small amount of text.
and still keep buttons symmetrical and not rely on the text to give it sizes sometimes doing that can be beneficial but some professional websites do like to keep buttons symmetrical for their design.
OK so I also thought yes adding a large amount of text to a button can be quite ridiculous sometimes but lets say the width applied to the button is catered for and some of the text has to warp like a small word for instance is there a way to shrink it like a slight bit just so that it actually fits the button like not so much text but a small bit that wouldnât effect the readability.
like for instance 3 words and the 3rd word seems to warp so bringing the font size down by one on that button only could be an optionâŚ
You would want both buttons equal width but you are suggesting that button 1 may need to have smaller text than button 2.
I would not think this is a very good solution as a difference in font size to me looks worse than a difference in button width. It kind of implies it is less important if the font is smaller.
Without amending each button on a case by case basis iâm not sure how to achieve what you want
You could adjust the letter spacing a little for the longer text but I think that would look odd.
Generally you would want a uniform approach to a button type menu but making all the same width also seems odd to me if the text is of widely varying widths. If the buttons are close in size then yes you could set a min- width to make them equal but to allow them to grow if needed.
You can stop button text wrapping using white-space:nowrap but you would still need to control overflow if you have extremely long buttonsâ which would be silly anyway.
All these decisions are design decisions and the best approach is not to squeeze your content where it doesnât want to go. A good designer will look at the content in hand and design the interface accordingly and not the other way around (ooh look shiny buttons).
Think about the content you want to display and use an approach that best fits your content. I have never had an issue with making buttons work responsively but you do need to think in advance.
As an aside Flexbox allows you to easily space out or stretch elements so you donât have to apply widths as such anyway (and this was possible with display table and table-cell to some degree also).