Text alignment off between form and regular button

Design help General
1

So I created a form (email field, submit button) and wanted to add a second button linking to a page. Although both buttons have the same class, same paddings, same text size and line height, text lines don’t match.

image

It seems in the form button the whole text field is centered, while on the next button the baseline is centered. I could, of course, tweak using paddings or any number of hacks, but I would rather understand what’s causing the misalignment in the first place.

Here is my site Read-Only: LINK
Here’s the link to the webflow hosted version

2

I don’t really know why your second button is acting like it does… but you can center it this way:

image
image237×647 12.6 KB

With flex horizontal center you don’t have to add padding.
I will look a little further to see if I can find out what the problem is

1 Like
3

Wow, that was fast!

Yup, that solves the alignment issue. Question is: why did one button need fixing but not the other one?

4

I’m not sure,

but I noticed some things between both buttons but I don’t know why it’s different :stuck_out_tongue:

First button:
image

Second button:

image

Also:

first button:
image

second button:
image

5

That “links” inheritance seems to be it. I just noticed all elements with that inheritance share the same alignment issue (the logo and 3 links on navbar; notice they’re not actually centered).

For context: the first button was created automatically when I inserted a default mail form. So it’s not a link, but a submit button. The second one was created later, and dragged into the same (form) group.