WIP

src/style/atoms/_button-outline.scss

@@ -0,0 +1,66 @@
+// Button: Outline
+.button-outline {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    height: 32px;
+    padding: 1px 16px 0;
+    font-family: $font-sans-sb;
+    font-size: rem(14px);
+    color: #fff;
+    background: none;
+    border: 2px solid #fff;
+    border-radius: 50vh;
+    overflow: hidden;
+    text-decoration: none;
+    cursor: pointer;
+    outline: none;
+    transition: all 275ms $ease-cubic;
+
+    @include breakpoint (sm) {
+        height: 40px;
+        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: translate3d(0, -120%, 0);
+    }
+
+    span, &:after {
+        transition: opacity 275ms $ease-cubic, transform 275ms $ease-cubic;
+    }
+
+    // Disabled
+    &.disabled {
+        color: $color-lightpurple;
+        border-color: $color-lightpurple;
+    }
+
+    // Hover
+    &:hover {
+        color: $color-tertiary;
+        border-color: $color-tertiary;
+
+        span {
+            opacity: 0;
+            transform: translate3d(0, 100%, 0);
+        }
+        &:after {
+            opacity: 1;
+            transform: translate3d(0, -50%, 0);
+        }
+    }
+}