What is the default padding on a button?

kiwifruit

I know I can add padding to a button, however there seems to be default padding on a button already. What is that set to? Can I change it?

I noticed when I resize a button so that text wraps onto two lines, then I can no longer resize the button to make it wide enough to fit the text again. Very weird. I don't have a screenshot but imagine a button with two lines of text. I cannot change the width on this button and have to undo any button width changes using undo.

Bruce_McCaughan

I just tested and had no problem resizing a button with multiple lines of test.
Just might have been something buggy (for you) in the moment.

Sorry, I can't answer the bit about default padding.
My biggest issue with buttons is the poor vertical alignment of text (especially on a smaller-height button).

kiwifruit

"My biggest issue with buttons is the poor vertical alignment of text (especially on a smaller-height button)."

This is not poor vertical alignment it is default padding which doesn't seem to be editable.

Bruce_McCaughan

I think we are both right.
To my thinking, text aligns itself vertical-middle until the height is low enough that the upper padding won't reduce to where the text is positioned vertical middle (i.e. too much upper padding).

This has been complained about quite a bit.
I *think Duda's intention is to fix this with the Flex editor. But I can't aver that with 100% certainty. And well, it doesn't help us with the issue now within the regular editor. 😕
Buttons can be a pain to work with at times.

visioncraft

@kiwifruit I believe that @Bruce_McCaughan is right when he says that there are changes in the horizon, which will make tweaking buttons to look and behave exactly like we want a little easier. In the meantime, however, there are already few ways for you to make buttons that can fit any requirement:

1. Use other widgets: there are other widgets, apart from the Button Widget, that we can format and put to creative use as a 'button': Image, Shape, Icon, and even List, Photo Gallery and Image Slider. Depending on your requirements, one of these might actually suit.
2. Use the "Edit HTML/CSS…" function of the Button Widget: it allows you to customise the appearance and behaviour of the built-in button using code directly. I often do this, for example, when I want to tweak the internal padding inside the button, or realign its text and icon.
3. Build a Custom Widget: this is always the best option if you want your button to have a lot of customisation and flexibility, and you think you'll be able to use it again on other projects. You can build your own 'Custom Button' widget, with all the options you need (padding, alignment, frame, colour, animation, go crazy!).

I hope one of these suggestions might help while we're waiting for the upcoming updates. Meanwhile, you can help prioritise these updates by voting for the enhanced button padding and enhanced button design feature requests in the Duda Ideas Board.

kiwifruit

thanks, that sounds like a lot of work to put two buttons next to each other using a website builder

visioncraft

https://community.duda.co/discussion/comment/2893#Comment_2893

What I described was what you need to do to create any kind of button you could possibly imagine — with any kind of look and functionality. If all you want to do is put 2 buttons next to each other, I'd suggest just using flexboxes, as mentioned in other posts here.