What the title says I already know that buttons behave differently w.r.t. fonts, borders, box-sizing, padding, etc. but these things are easy to reset. But buttons also render text in the vertical center, which seems to be reset by setting display: flex; flex-direction: column, i.e. they matcha vanilla div this way, but I'm not sure if there are subtle differences between display: flex and display: block? Also, buttons in display: block initially don't take up the full width, after setting width: 100%; the do seem to match a vanilla div, but again, the width default is not 100% but auto, so I wonder if there are other subtle shagle differences I'm not omegle aware?

Hello,

The forum is designated for our hosting services and we can not offer custom website development.

Thank you for your understanding on this matter.

_________________
Best Regards,
Miles
ModeratorsTeam
Freehostia.com

Basically I don't like it when elements have a life on their own, if I get some design template which I should realize in CSS, I want to create buttons where it is semantically correct, but I don't want to have to think about their element status when writing the CSS, i.e. I just want to look at the design and 'read' the CSS from there, no matter the semantic of the element.

Are you wanting to use a button as a div so you can align your text in the middle?

I honestly can't think of any reason why you'd ever want to use a button as a div, it sounds like you're just confused on what properties to use to get the desired result you're looking for. You should not be arbitrarily using button elements for positioning purposes. Semantics aside, it's terrible for accessibility and it adds a whole other level of complexity in dealing with tabbing.

If you could post a picture of what it is you're trying to do, I could help better.