diff --git a/main/ui-main/public/kontakty.html b/main/ui-main/public/kontakty.html
index a4188b9494f0042cfc091a5b7d59f5ad62f40d7c..a5662125b87059b4434bf585512e44945970ef80 100644
--- a/main/ui-main/public/kontakty.html
+++ b/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">
-          Lidé
+        <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>
diff --git a/main/ui-main/src/css/molecules/sliding_button.pcss b/main/ui-main/src/css/molecules/sliding_button.pcss
new file mode 100644
index 0000000000000000000000000000000000000000..6890f91a2515dc517d0e59e9274cddf79cf1b562
--- /dev/null
+++ b/main/ui-main/src/css/molecules/sliding_button.pcss
@@ -0,0 +1,29 @@
+.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
+    }
+  }
+}
diff --git a/main/ui-main/src/css/style.pcss b/main/ui-main/src/css/style.pcss
index ddb457d453aab5b9275337fb7a38eb1b1dcc2f77..99b219b76a6b1abce95bceb78b62f06a0e8f6e7d 100644
--- a/main/ui-main/src/css/style.pcss
+++ b/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";
diff --git a/main/ui-main/tailwind.config.js b/main/ui-main/tailwind.config.js
index a9ca499da8194f93cb01a7a50728ff0953e61837..271c13fb9dea46a482fcfd66e8375ba127776a14 100644
--- a/main/ui-main/tailwind.config.js
+++ b/main/ui-main/tailwind.config.js
@@ -146,83 +146,83 @@ module.exports = {
         },
     },
     plugins: [
-            require("./tailwind-plugins/buttons")({
-      defaultColor: {
-        text: 'white',
-        background: 'black',
-        iconBorder: 'grey.300'
-      },
-      colors: {
-        'black': {
-          text: 'white',
-          background: 'black',
-          iconBorder: 'grey.400',
-          hoverIconBorder: 'grey.600',
-        },
-        'grey-700': {
-          text: 'white',
-          background: 'grey.700',
-          iconBorder: 'grey.500',
-          hoverBackground: 'grey.400',
-          hoverIconBorder: 'grey.600',
-        },
-        'grey-500': {
-          text: 'white',
-          background: 'grey.500',
-          iconBorder: 'grey.300',
-          hoverBackground: 'grey.300',
-          hoverIconBorder: 'grey.400',
-        },
-        'grey-125': {
-          text: 'black',
-          background: 'grey.125',
-        },
-        'white': {
-          text: 'black',
-          background: 'white',
-          iconBorder: 'grey.100',
-        },
-        'blue-300': {
-          text: 'white',
-          background: 'blue.300',
-        },
-        'cyan-200': {
-          text: 'white',
-          background: 'cyan.200',
-        },
-        'green-300': {
-          text: 'white',
-          background: 'green.300',
-        },
-        'green-400': {
-          text: 'white',
-          background: 'green.400',
-        },
-        'green-500': {
-          text: 'black',
-          background: 'green.500',
-        },
-        'orange-300': {
-          text: 'white',
-          background: 'orange.300',
-        },
-        'violet-400': {
-          text: 'white',
-          background: 'violet.400',
-        },
-        'violet-500': {
-          text: 'black',
-          background: 'violet.500',
-        },
-        'red-600': {
-          text: 'white',
-          background: 'red.600',
-        },
-        'brands-facebook': {
-          text: 'white',
-          background: 'brands.facebook',
-        }
-      }
-    })
+        require("./tailwind-plugins/buttons")({
+            defaultColor: {
+                text: 'white',
+                background: 'black',
+                iconBorder: 'grey.300'
+            },
+            colors: {
+                'black': {
+                    text: 'white',
+                    background: 'black',
+                    iconBorder: 'grey.400',
+                    hoverIconBorder: 'grey.600',
+                },
+                'grey-700': {
+                    text: 'white',
+                    background: 'grey.700',
+                    iconBorder: 'grey.500',
+                    hoverBackground: 'grey.400',
+                    hoverIconBorder: 'grey.600',
+                },
+                'grey-500': {
+                    text: 'white',
+                    background: 'grey.500',
+                    iconBorder: 'grey.300',
+                    hoverBackground: 'grey.300',
+                    hoverIconBorder: 'grey.400',
+                },
+                'grey-125': {
+                    text: 'black',
+                    background: 'grey.125',
+                },
+                'white': {
+                    text: 'black',
+                    background: 'white',
+                    iconBorder: 'grey.100',
+                },
+                'blue-300': {
+                    text: 'white',
+                    background: 'blue.300',
+                },
+                'cyan-200': {
+                    text: 'white',
+                    background: 'cyan.200',
+                },
+                'green-300': {
+                    text: 'white',
+                    background: 'green.300',
+                },
+                'green-400': {
+                    text: 'white',
+                    background: 'green.400',
+                },
+                'green-500': {
+                    text: 'black',
+                    background: 'green.500',
+                },
+                'orange-300': {
+                    text: 'white',
+                    background: 'orange.300',
+                },
+                'violet-400': {
+                    text: 'white',
+                    background: 'violet.400',
+                },
+                'violet-500': {
+                    text: 'black',
+                    background: 'violet.500',
+                },
+                'red-600': {
+                    text: 'white',
+                    background: 'red.600',
+                },
+                'brands-facebook': {
+                    text: 'white',
+                    background: 'brands.facebook',
+                }
+            }
+        })
     ],
 }