WIP

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