Hi,
I'd like to maintain a consisent UX experience for our users, and for our Persoans dashboard I'd like the buttons to be similar to the buttons used in the Fiori launchpad.
Unfortunately, when I make the transaction buttons square shaped, the text is centre-aligned and doesn't wrap and I can't figure out how to change the text alignment to wrap and be top-aligned:

So I thought to make the button blank, and then add a seperate wrapping label:
On top of the button, to display the text, and this looks good:

But the problem now is that the user can't click on the area that has the wrapping label (outlined in blue above) to access the transaction, and this obviously frustrates the user.
I'm thinking there is probably an easier way to create Fiori style buttons that I am missing.
Does anyone have any useful tips on how to achieve this?
Thanks in advance!