color btn

web/public/style.css

@@ -246,9 +246,6 @@ a {
   cursor: pointer;
   text-decoration: underline;
 }
-a:focus {
-  filter: brightness(1.333);
-}
 b {
   font-weight: bold;
 }
@@ -282,6 +279,53 @@ img {
   display: block;
   margin: 0 auto;
 }
+.btn {
+  padding: 6px 12px;
+  border-radius: 6px;
+  color: var(--col-10);
+  outline: 2px solid var(--col-10);
+  font-weight: bold;
+  letter-spacing: 1px;
+  text-shadow: 1px 1px 1px var(--col-05);
+  text-decoration: none;
+  background: linear-gradient(
+    135deg,
+    rgb(0 255 0 / 33%),
+    rgb(0 255 0 / 0%) 50%
+  ),
+  linear-gradient(
+    225deg,
+    rgb(255 255 0 / 33%),
+    rgb(255 255 0 / 0%) 50%
+  ),
+  linear-gradient(
+    -45deg,
+    rgb(255 0 0 / 33%), 
+    rgb(255 0 0 / 0%) 50%
+  ),
+  linear-gradient(
+    45deg,
+    rgb(0 0 255 / 33%),
+    rgb(0 0 255 / 0%) 50%
+  );
+  background-size: 600% 1200%;
+  background-position: 50% 50%;
+  transition: 0.333s;
+}
+.btn:hover {
+  background-size: 100% 100%;
+}
+.bob {
+  animation: bob 0.333s infinite alternate;
+}
+@keyframes bob {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-4px);
+  }
+}
 /* keep this at the end */
 .disabled {
   filter: grayscale(100%);