Should buttons overlap inputs?

Hi there,

I am wondering if it’s ok to have a submit button overlap an input field?

Something like these:

Or is it better to have the input and button separate? I kind of like the above examples as they are fairly simple and think they show the whole form as one element.

Any thoughts would be great, thanks!

For me this is ok, as long as you set a big enough padding-right to the input field so that if the user enters a long phrase this is not hidden by the button

You can avoid the button overlapping the input field and make the whole thing responsive . . . .

Thanks for the feedback. I think I will stick to how it is at the moment.

I am wondering on other forms if the fields should all be rounded, so for example like this:

Or of they should have rounded corners, but not fully rounded like this?

What are peoples thoughts on this?


Depends on your style guide.

In the 90th all was rounded and 3d and colorful. At the moment everything is back to be flat and straight…

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.