Client access link animation #499 @0:20

diff --git a/less/102-footer.less b/less/102-footer.less
index 54e7ceac5bbfce4101af4bc28db076df5a6cba78..6e596387fb4d99bb938618a72fdbd5aec43d1a6e 100644 (file)
--- a/less/102-footer.less
+++ b/less/102-footer.less
@@ -74,11 +74,12 @@ footer.site {
   .workshop-link {
     .rounded-button();
     .border-button(#fff, #fff);
-    padding: 20px 83px 20px 46px;
+    padding: 20px 65px;
     border-radius: 26px;
     text-transform: uppercase;
     font-size: 12px;
     position: relative;
+    transition: all 0.25s;
 
     &:after {
       content: '';
@@ -89,6 +90,16 @@ footer.site {
       right: 45px;
       background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOSAxMy45Ij48c3R5bGU+LnN0MHtmaWxsOiNGRkZGRkY7fTwvc3R5bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTE4LjUgNy40Yy0uMSAwLS4zIDAtLjQtLjFMMTEuNy45Yy0uMi0uMi0uMi0uNSAwLS43LjItLjIuNS0uMi43IDBsNi40IDYuNGMuMi4yLjIuNSAwIC43IDAgLjEtLjIuMS0uMy4xeiIvPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xOC41IDcuNEguNWMtLjMgMC0uNS0uMi0uNS0uNXMuMi0uNS41LS41aDE4Yy4zIDAgLjUuMi41LjVzLS4yLjUtLjUuNXoiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTIuMSAxMy45Yy0uMSAwLS4zIDAtLjQtLjEtLjItLjItLjItLjUgMC0uN2w2LjQtNi40Yy4yLS4yLjUtLjIuNyAwIC4yLjIuMi41IDAgLjdsLTYuNCA2LjRjLS4xIDAtLjIuMS0uMy4xeiIvPjwvc3ZnPg==');
       background-size: 100%;
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+
+    &:hover {
+      padding: 20px 84px 20px 46px;
+
+      &:after {
+        opacity: 1;
+      }
     }
   }
 }