WIP

poli/assets/css/v1_app.css

@@ -1,3 +1,5 @@
 @import "v1_core.css";
 
+@import "v1_buttons.css";
+
 @import "v1_temp.css";

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);
+  }
+}

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%);
 

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%;

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>