feat: built initial version of Vote button component

src/features/Projects/pages/ProjectPage/VoteButton/vote-button-style.module.css

@@ -0,0 +1,77 @@
+.vote_button {
+  --scale: 0;
+  transition: background-color 1s;
+  background-color: hsl(25, 100%, max(calc((95 - var(--scale) / 4) * 1%), 63%));
+}
+
+.vote_counter {
+  position: absolute;
+  left: 50%;
+  bottom: 110%;
+  color: hsl(25, 100%, 50%);
+  font-weight: bold;
+  font-size: 21px;
+  will-change: transform;
+  opacity: min(calc(var(--scale) * 1), 1);
+  transform: translate(-50%, max(calc(-1px * var(--scale) / 10), -30px))
+    scale(calc(1 + min(var(--scale) / 150, 2)));
+  text-shadow: 0 0 4px hsl(25, 100%, 50%);
+}
+
+.spark {
+  position: absolute;
+  bottom: 46%;
+  left: calc(var(--offsetX) * 1%);
+  transform: scale(var(--scale));
+  opacity: 0;
+  will-change: transform;
+
+  animation-name: fly-spark-1;
+  animation-duration: calc(var(--animationSpeed) * 1s);
+  animation-timing-function: linear;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+  filter: drop-shadow(0 0 4px);
+}
+
+@keyframes fly_spark_1 {
+  0% {
+    transform: translate(0, 0) scale(var(--scale));
+    opacity: 1;
+  }
+
+  33% {
+    transform: translate(12px, -70px) scale(var(--scale));
+  }
+
+  66% {
+    transform: translate(0, -140px) scale(var(--scale));
+    opacity: 0.6;
+  }
+
+  100% {
+    transform: translate(6px, -200px) scale(var(--scale));
+    opacity: 0;
+  }
+}
+
+@keyframes fly_spark_2 {
+  0% {
+    transform: translate(0, 0) scale(var(--scale));
+    opacity: 1;
+  }
+
+  50% {
+    transform: translate(-10px, -80px) scale(var(--scale));
+  }
+
+  80% {
+    transform: translate(-4px, -140px) scale(var(--scale));
+    opacity: 0.6;
+  }
+
+  100% {
+    transform: translate(-6px, -160px) scale(var(--scale));
+    opacity: 0;
+  }
+}