From 1f4af537c0bf4d8253590fd8c9f449b7a13805a9 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Tue, 11 Dec 2018 15:46:16 +0100
Subject: Button transitions

---
 packages/website/ts/@next/components/button.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

(limited to 'packages/website/ts/@next/components/button.tsx')

diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index 074371453..eaaf60336 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -35,9 +35,12 @@ export const Button = styled.button<ButtonInterface>`
     font-size: ${props => props.isWithArrow ? '20px' : '18px'};
     text-decoration: none;
     cursor: pointer;
+    transition: background-color 0.35s, border-color 0.35s;
 
     svg {
-        margin-left: 12px;
+        margin-left: 9px;
+        transition: transform 0.5s;
+        transform: translate3d(-2px, 2px, 0);
     }
 
     path {
@@ -47,6 +50,10 @@ export const Button = styled.button<ButtonInterface>`
     &:hover {
         background-color: ${props => !props.isTransparent && '#04BEA8'};
         border-color: ${props => (props.isTransparent && !props.isNoBorder && !props.isWithArrow) && '#00AE99'};
+
+        svg {
+            transform: translate3d(2px, -2px, 0);
+        }
     }
 `;
 
-- 
cgit v1.2.3