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>

src/style/atoms/_button-outline.scss

@@ -23,26 +23,29 @@
         font-size: rem(18px);
     }
 
-    span {
-        display: block;
-    }
 
     // Second text
-    &:after {
+    .text {
-        opacity: 0;
+        span {
-        content: attr(data-text);
+            display: block;
-        position: absolute;
+        }
-        display: block;
-        text-align: center;
-        top: 50%;
-        left: 0;
-        right: 0;
-        transform: translateY(-120%);
-    }
 
-    span, &:after {
+        &:after {
-        transition: transform 275ms $ease-cubic, opacity 275ms $ease-cubic;
+            opacity: 0;
-        will-change: transform, opacity;
+            content: attr(data-text);
+            position: absolute;
+            display: block;
+            text-align: center;
+            top: 50%;
+            left: 0;
+            right: 0;
+            transform: translateY(-120%);
+        }
+
+        span, &:after {
+            transition: transform 275ms $ease-cubic, opacity 275ms $ease-cubic;
+            will-change: transform, opacity;
+        }
     }
 
     // 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
+    .text {
+        position: relative;
+        overflow: hidden;
+
+        &:after {
+            content: attr(data-text);
+            opacity: 0;
+            display: block;
+            position: absolute;
+            top: 50%;
+            left: 0;
+            width: 100%;
+            transform: translateY(-120%);
+        }
+    }
+
     span {
         display: block;
     }
-    &:after {
+    span, .text:after {
-        opacity: 0;
-        content: attr(data-text);
-        position: absolute;
-        display: block;
-        top: 50%;
-        left: 0;
-        width: 100%;
-        transform: translateY(-120%);
-    }
-    span, &: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;
         }
-        span {
+        .text {
-            opacity: 0;
+            span {
-            transform: translateY(100%);
+                opacity: 0;
-        }
+                transform: translateY(100%);
-        &:after {
+            }
-            opacity: 1;
+            &:after {
-            transform: translateY(-47%);
+                opacity: 1;
-
-            @include breakpoint (sm) {
                 transform: translateY(-50%);
             }
         }