fix: vertical align content of UUI-Button anchor tag (#254)

* make anchor tag story more visible

* use flexbox for content alignment

Author: nielslyngsoe

packages/uui-button/lib/uui-button.element.ts

@@ -100,12 +100,15 @@ export class UUIButtonElement extends FormControlMixin(
         text-align: inherit;
         border: none;
         cursor: inherit;
-        display: block;
+
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
 
         /* for anchor tag: */
         text-decoration: none;
         color: currentColor;
-        line-height: normal;
+        line-height: inherit;
 
         border-width: var(--uui-button-border-width, 1px);
         border-style: solid;
@@ -119,7 +122,6 @@ export class UUIButtonElement extends FormControlMixin(
           calc(var(--uui-size-2) * var(--uui-button-padding-right-factor)) 0
           calc(var(--uui-size-2) * var(--uui-button-padding-left-factor));
 
-        vertical-align: middle;
         box-shadow: none;
       }
       button[disabled]:active,

packages/uui-button/lib/uui-button.story.ts

@@ -324,12 +324,14 @@ export const AnchorTag = Template.bind({});
 AnchorTag.args = {
   href: 'https://www.umbraco.com',
   target: '_blank',
+  look: 'primary',
 };
 AnchorTag.parameters = {
   docs: {
     source: {
       code: html`
         <uui-button
+          look="primary"
           label="Open umbraco.com"
           href="http://www.umbraco.com"
           target="_blank">