Rethink buttons hover transitions

src/style/atoms/_button-outline.scss

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