style for buttons

static/css/base.css

@@ -40,6 +40,8 @@
 
 :root {
     --transition-duration: 0.15s;
+
+    --ease-out-quintic: cubic-bezier(0.17, 0.84, 0.44, 1);
 }
 
 @media (prefers-reduced-motion: reduce) {

static/css/main.css

@@ -415,6 +415,39 @@ hr {
     margin-bottom: 2em;
 }
 
+/* Buttons */
+
+button {
+    padding: 0.2rem 1.2rem;
+
+    border: 1px solid var(--border-2);
+    background-color: color-mix(in oklab, var(--background-color), white 25%);
+    color: var(--text-color);
+    box-shadow: 0 1px 2px var(--border-1);
+
+    border-radius: 100px;
+
+    transition:
+        background-color var(--transition-duration) var(--ease-out-quintic),
+        box-shadow var(--transition-duration) var(--ease-out-quintic),
+        transform var(--transition-duration) var(--ease-out-quintic);
+
+    &:hover {
+        box-shadow: 0 4px 6px var(--border-1);
+        transform: translateY(-2px);
+    }
+
+    &:active {
+        background-color: color-mix(
+            in oklab,
+            var(--background-color),
+            var(--shading-base) 5%
+        );
+        box-shadow: 0 0 2px var(--border-1);
+        transform: translateY(0);
+    }
+}
+
 /* Style the noscript box a little more prettily. */
 
 .noscript {