Refactor: Aligned the button content in center

[poswalsameer]

Description

This PR solves the issue of button content not being in center because of some inconsistent styling used in the example.css file. Refactored the code by introducing flexbox in it and aligning everything to the center.

Fixes: #1220

Implementation

Just needed to figure out where the applied class is present. Found it, and got to know that flexbox is not applied to it correctly. So changed the classes accordingly.

Tests

Basic CSS change, no tests required.

Todos

No

Additional context

Attaching the screenshot of the code file changed for reference:

[trueqbit]

How can I test this if I am using the 'dist' version of elements.js [version v1.1 downloaded from a CDN]?

[trueqbit]

@poswalsameer When I change the inline styles directly in the browser's developer console, the icon and the text are now too close together, as you can see in the screenshot.

[bjoern-m]

Just a quick hint: The example CSS file isn’t embedded directly by Hanko elements. As the name suggests, it's only an example. For more information, check this section of the README. If you need to make adjustments, modify the SASS file located at frontend/elements/src/components/icons/styles.sass.

[poswalsameer]

@poswalsameer When I change the inline styles directly in the browser's developer console, the icon and the text are now too close together, as you can see in the screenshot.

Thanks for pointing this out, I will surely look into this again.

[FlxMgdnz]

/award 150

[oss-gg]

Awarding poswalsameer: 150 points 🕹️ Well done! Check out your new contribution on oss.gg/poswalsameer