F7-button aligning text to the top

If I resize a button, say I want it with a higher vertical size, the text won’t center, it’ll stay on top, it also happens with a normal button with class=“button”

I’d like to use the f7-button because of it’s nice animation, however not being able to resize it to a desired size is an issue.

You need to resize it using CSS variables https://framework7.io/docs/floating-action-button.html#css-variables

Worked like a charm.

Thank you.

So for the record, every f7 component should be edited with those variables instead of the normal CSS ones?

Not necessarily, can be done with pure CSS, just inspect element and make sure you have modified all required props. Advantage of CSS vars, is that changing one var can actually affect multiple CSS props that need to be changed