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>
+    <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>
+    <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>

src/style/atoms/_button-outline.scss

@@ -23,11 +23,13 @@
         font-size: rem(18px);
     }
 
+
+    // Second text
+    .text {
         span {
             display: block;
         }
 
-    // Second text
         &:after {
             opacity: 0;
             content: attr(data-text);
@@ -44,6 +46,7 @@
             transition: transform 275ms $ease-cubic, opacity 275ms $ease-cubic;
             will-change: transform, opacity;
         }
+    }
 
     // Disabled
     &.disabled {
@@ -60,7 +63,7 @@
             opacity: 0;
             transform: translateY(100%);
         }
-        &:after {
+        .text:after {
             opacity: 1;
             transform: translateY(-50%);
         }

src/style/atoms/_button.scss

@@ -48,33 +48,30 @@
     }
 
     // Text
-    span {
-        display: block;
-    }
+    .text {
+        position: relative;
+        overflow: hidden;
+
         &:after {
-        opacity: 0;
             content: attr(data-text);
-        position: absolute;
+            opacity: 0;
             display: block;
+            position: absolute;
             top: 50%;
             left: 0;
             width: 100%;
             transform: translateY(-120%);
         }
-    span, &:after {
+    }
+
+    span {
+        display: block;
+    }
+    span, .text:after {
         transition: transform 275ms $ease-cubic, opacity 275ms $ease-cubic;
         will-change: transform, opacity;
     }
 
-    // Button has an icon (offset the hovered text)
-    &-icon:after {
-        left: 13px;
-
-        @include breakpoint (sm) {
-            left: 19px;
-        }
-    }
-
     // Hover
     &:hover {
         color: #fff;
@@ -86,15 +83,13 @@
         .anim {
             animation-play-state: running;
         }
+        .text {
             span {
                 opacity: 0;
                 transform: translateY(100%);
             }
             &:after {
                 opacity: 1;
-            transform: translateY(-47%);
-
-            @include breakpoint (sm) {
                 transform: translateY(-50%);
             }
         }