From 5e495f3395f329112bb4b707504e490bc428fd59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20=C5=A0ub=C3=ADn?= <filip.subin@seznam.cz>
Date: Sat, 17 Feb 2024 19:00:30 +0100
Subject: [PATCH] WIP

---
 poli/assets/css/v1_app.css     |   2 +
 poli/assets/css/v1_buttons.css | 105 +++++++++++++++++++++++++++++++++
 poli/assets/css/v1_core.css    |   3 +
 poli/assets/css/v1_temp.css    |   9 ++-
 poli/index.html                |   3 +
 5 files changed, 121 insertions(+), 1 deletion(-)
 create mode 100644 poli/assets/css/v1_buttons.css

diff --git a/poli/assets/css/v1_app.css b/poli/assets/css/v1_app.css
index b0c5f64..2805ed4 100644
--- a/poli/assets/css/v1_app.css
+++ b/poli/assets/css/v1_app.css
@@ -1,3 +1,5 @@
 @import "v1_core.css";
 
+@import "v1_buttons.css";
+
 @import "v1_temp.css";
diff --git a/poli/assets/css/v1_buttons.css b/poli/assets/css/v1_buttons.css
new file mode 100644
index 0000000..06eaf46
--- /dev/null
+++ b/poli/assets/css/v1_buttons.css
@@ -0,0 +1,105 @@
+.button {
+    position: relative;
+    cursor: pointer;
+}
+
+.button--special,
+.button--special:after {
+  width: 9.375rem;
+  height: 3rem;
+  line-height: 2.4;
+  font-size: 1.25rem;
+  font-family: var(--font-primary);
+  font-weight: 400;
+  font-style: normal;
+  background: linear-gradient(45deg, transparent 5%, var(--color-background-button-primary) 5%);
+  border: 0;
+  color: #fff;
+  letter-spacing: 3px;
+  box-shadow: 6px 0px 0px var(--color-background-button-secondary);
+  outline: transparent;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  margin-right: -0.0625rem;
+}
+
+.button--special:after {
+  --slice-0: inset(50% 50% 50% 50%);
+  --slice-1: inset(80% -6px 0 0);
+  --slice-2: inset(50% -6px 30% 0);
+  --slice-3: inset(10% -6px 85% 0);
+  --slice-4: inset(40% -6px 43% 0);
+  --slice-5: inset(80% -6px 5% 0);
+  
+  content: 'Přihlásit';
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(45deg, transparent 3%, var(--color-background-button-secondary) 3%, var(--color-background-button-secondary) 5%, var(--color-background-secondary) 5%);
+  text-shadow: -3px -3px 0px var(--color-background), 3px 3px 0px var(--color-background-button-secondary);
+  clip-path: var(--slice-0);
+}
+
+.button--special:hover:after {
+  animation: 1s glitch;
+  animation-timing-function: steps(2, end);
+}
+
+@media (min-width: 768px) {
+    .button--special,
+    .button--special:after {
+      width: 12.5rem;
+      height: 3rem;
+    }
+  }
+
+@keyframes glitch {
+  0% {
+    clip-path: var(--slice-1);
+    transform: translate(-20px, -10px);
+  }
+  10% {
+    clip-path: var(--slice-3);
+    transform: translate(10px, 10px);
+  }
+  20% {
+    clip-path: var(--slice-1);
+    transform: translate(-10px, 10px);
+  }
+  30% {
+    clip-path: var(--slice-3);
+    transform: translate(0px, 5px);
+  }
+  40% {
+    clip-path: var(--slice-2);
+    transform: translate(-5px, 0px);
+  }
+  50% {
+    clip-path: var(--slice-3);
+    transform: translate(5px, 0px);
+  }
+  60% {
+    clip-path: var(--slice-4);
+    transform: translate(5px, 10px);
+  }
+  70% {
+    clip-path: var(--slice-2);
+    transform: translate(-10px, 10px);
+  }
+  80% {
+    clip-path: var(--slice-5);
+    transform: translate(20px, -10px);
+  }
+  90% {
+    clip-path: var(--slice-1);
+    transform: translate(-10px, 0px);
+  }
+  100% {
+    clip-path: var(--slice-1);
+    transform: translate(0);
+  }
+}
diff --git a/poli/assets/css/v1_core.css b/poli/assets/css/v1_core.css
index 74b7289..08152bc 100644
--- a/poli/assets/css/v1_core.css
+++ b/poli/assets/css/v1_core.css
@@ -9,6 +9,9 @@
   --color-background: #091924;
   --color-background-secondary: #2a3a33;
 
+  --color-background-button-primary: #27312d;
+  --color-background-button-secondary: #0a151c;
+
 	--border-radius: 0.25rem;
 	--header-shadow: 0rem 0.25rem 1rem -0.125rem rgb(0 0 0 / 30%);
 
diff --git a/poli/assets/css/v1_temp.css b/poli/assets/css/v1_temp.css
index f39cd5f..0557232 100644
--- a/poli/assets/css/v1_temp.css
+++ b/poli/assets/css/v1_temp.css
@@ -5,7 +5,7 @@
     left: 0;
 }
 
-.menu__link, .valut__title, label {
+.menu__link, .valut__title, label, .button {
     color: var(--color-white-100);
     text-shadow: 0.3125rem 0.0625rem 0.1875rem var(--color-black);
 }
@@ -92,6 +92,13 @@
     height: 31.25rem;
 }
 
+.valut__button {
+    position: absolute;
+    bottom: -3.25rem;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
 .section {
     position: relative;
     width: 100%;
diff --git a/poli/index.html b/poli/index.html
index 9d162d3..b3ae129 100644
--- a/poli/index.html
+++ b/poli/index.html
@@ -36,6 +36,9 @@
               <label for="password">Pass</label>
               <input type="password" name="password" class="input">
             </div>
+            <div class="valut__button">
+              <button class="button button--special" role="button">Přihlásit</button>
+            </div>
           </div>
         </div>
   		</section>