feat: button style/visibility

src/App.css

@@ -136,6 +136,8 @@ input:checked+.slider:before {
   color: #444;
 }
 
+
+
 .hint {
   position: absolute;
   font-size: 80%;
@@ -244,7 +246,7 @@ button {
   z-index: 1;
 
   &:hover {
-    opacity: 75%;
+    opacity: 80%;
   }
 }
 
@@ -307,10 +309,15 @@ button {
     bottom: 16px;
     padding: 0.4em;
     border-radius: 1em;
-    background-color: rgba(0, 0, 0, 0.3);
+    background-color: #36c8;
     font-size: xx-large;
     margin-bottom: 16px;
     margin-right: 16px;
+
+  }
+
+  .wavering {
+    animation: blink 40s infinite;
   }
 }
 
@@ -324,12 +331,13 @@ button {
 }
 
 .tab-button {
+  color: black;
   flex: 1;
-  background-color: grey;
+  background-color: #bfbfbf;
   border: none;
   margin: 4px auto;
   cursor: pointer;
-  opacity: 50%;
+  opacity: 80%;
 }
 
 .tab-button.active {
@@ -352,7 +360,7 @@ button {
     opacity: 50%;
 
     &:hover {
-      opacity: 75%;
+      opacity: 80%;
     }
   }
 }
@@ -435,6 +443,67 @@ button {
   left: 48px;
 }
 
+@keyframes blink {
+
+  0% {
+    background-color: #36c8;
+  }
+
+
+  13% {
+    background-color: #36c8;
+  }
+
+  15% {
+    background-color: #f00a;
+  }
+
+  17% {
+    background-color: #36c8;
+  }
+
+
+  38% {
+    background-color: #36c8;
+  }
+
+  40% {
+    background-color: #ff0a;
+  }
+
+  42% {
+    background-color: #36c8;
+  }
+
+  63% {
+    background-color: #36c8;
+  }
+
+  65% {
+    background-color: #248f24aa;
+  }
+
+  67% {
+    background-color: #36c8;
+  }
+
+  88% {
+    background-color: #36c8;
+  }
+
+  90% {
+    background-color: #4700b3aa;
+  }
+
+  92% {
+    background-color: #36c8;
+  }
+
+  100% {
+    background-color: #36c8;
+  }
+}
+
 /*======SPINNER=======*/
 
 .loader {

src/Rankings.tsx

@@ -133,7 +133,7 @@ function ChemistryDnD({ user, players }: PlayerInfoProps) {
         </div>
       </div>
 
-      <button className="submit" onClick={() => handleSubmit()}>
+      <button className="submit wavering" onClick={() => handleSubmit()}>
         💾 <span className="submit_text">submit</span>
       </button>
       <dialog
@@ -225,7 +225,7 @@ function MVPDnD({ user, players }: PlayerInfoProps) {
         </div>
       </div>
 
-      <button className="submit" onClick={() => handleSubmit()}>
+      <button className="submit wavering" onClick={() => handleSubmit()}>
         💾 <span className="submit_text">submit</span>
       </button>
       <dialog