Padding in buttons

Hey guys, how are you?

I´m currently having to create fake buttons (text´s with the same styling as my main buttons) in order to be able to guarantee that my buttons handle visually correctly the texts within, specially in large messages.

Why don´t we have padding config to buttons?

5 Likes

I don’t know the answer to your question, but I can say that I only use texts for buttons, they are very flexible.

I think he is referring to dynamic width.

I´m referring to the exact word: padding. Imagine some use cases:

I draw a button, allow it to have flexible width and a large message inside.

Whichever the case, page width or user equipament, i want it to keep a 10px padding from the button border to the start of the text (all paddings, vertical and horizontal), just like a simple padding CSS rule.

As we doesn´t have it, we are using text as button, but that is a workaround, not the correct usage of neither of these elements.

2 Likes

Like you said, you could write a simple CSS rule and apply it to your buttons with the Classify plugin.

CSS to put in the header or and HTML element:
myButton { padding: 10px; }

Then, in the ID Attribute field of your buttons you would write: {addClass: "myButton"}

5 Likes

You need to style width also:
width: auto !important;
padding: 20px !important;

and to set your button as not fixed width, i tested with safari ios/chrome works perfect.
@contato your’e welcome …

5 Likes

+1 for this feature, I would like to avoid installing a plugin just for that, and as @contato said It would be great to use the button element on its own (=without having to create a text element on top of it).

For instance I have a lot of conditional formatting on a button right now, and I realized that the text does not display well because of the lack of horizontal padding. So I will have to split the conditional formatting between the button and the separate text element, it would have been easier to have everything in the button as the conditions’ expressions are the same… here everything has to be duplicated.

4 Likes

I think I have a workaround that is much simpler, by using the border instead of padding and choosing the same color as the button. still not useful if you want to reverse color when hovering the button.

1 Like

Why didn’t Bubble copy Webflow’s design layout?

Ngl, Bubble’s design layout is terrible in comparison. So much is missing.

Matt Legrand — Post-industrial design (insprd.io)

+1 not sure why this isn’t a default in Style config