main: contact box with sliding btn

main/ui-main/public/kontakty.html

@@ -152,8 +152,13 @@
             Další osoby naleznete na stránce pirati.cz
           </p>
         </div>
-        <a href="" class="block bg-black text-white">
+        <a href="" class="btn btn__slide__wrap">
+          <span class="btn bg-black text-white w-32">
             Lidé
+          </span>
+          <span class="btn bg-blue-300 text-white w-32">
+            Lidé
+          </span>
         </a>
       </div>
     </div>

main/ui-main/src/css/molecules/sliding_button.pcss

+.btn {
+  @apply font-alt inline-block h-11 leading-9 py-1;
+}
+
+.btn__slide__wrap {
+  overflow: hidden;
+  position: relative;
+
+  :first-child {
+    position: relative;
+    transition: all linear 0.25s;
+  }
+
+  :last-child {
+    left: -100%;
+    position: absolute;
+    transition: all linear 0.25s;
+  }
+
+  &:hover {
+    :first-child {
+      transform: translateX(100%);
+    }
+
+    :last-child {
+      left: 0
+    }
+  }
+}

main/ui-main/src/css/style.pcss

@@ -24,6 +24,7 @@
 
 
 @import "./molecules/box.pcss";
+@import "./molecules/sliding_button.pcss";
 
 @import "./organisms/footer.pcss";
 @import "./organisms/navbar.pcss";