Rethink buttons hover transitions

src/atoms/Button.svelte

@@ -2,19 +2,21 @@
     export let href = '#'
     export let type = 'a'
     export let text = ''
-
-    const hasSlot = arguments[1].$$slots !== undefined
 </script>
 
 {#if type === 'button'}
-<button class={$$props.class ? $$props.class : 'button'} class:button-icon={hasSlot} data-text={text} on:click>
+<button class={$$props.class ? $$props.class : 'button'} on:click>
     <slot></slot>
-    <span>{text}</span>
+    <div class="text" data-text={text}>
+        <span>{text}</span>
+    </div>
 </button>
 
 {:else}
-<a {href} class={$$props.class ? $$props.class : 'button'} class:button-icon={hasSlot} data-text={text} on:click>
+<a {href} class={$$props.class ? $$props.class : 'button'} on:click>
     <slot></slot>
-    <span>{text}</span>
+    <div class="text" data-text={text}>
+        <span>{text}</span>
+    </div>
 </a>
 {/if}

src/atoms/LinkTranslate.svelte

@@ -1,13 +1,13 @@
 <script>
     import * as fn from '../functions'
 
-    export let href = ''
+    export let href = '/'
     export let text = ''
     export let target = ''
     export let rel = ''
 </script>
 
-<a {href} class="link-translate" {target} {rel}>
+<a class="link-translate" {href} {target} {rel}>
     <slot />
     <div class="text" data-text={text}>
         <span>{text}</span>