upd: button styles

2 files changed, 43 insertions, 6 deletions

diff --git a/register.php b/register.php
index 0804d3d..0771788 100644
--- a/register.php
+++ b/register.php
@@ -92,11 +92,11 @@ if ($_SERVER['REQUEST_METHOD'] == 'POST') {
             </div>
             <div>
                 <input type="checkbox" name="tos" id="tos" required>
-                <label for="tos">I accept the <a href="/static/txt/TOS.txt">TOS</a>, including <a
-                        href="/static/txt/PRIVACY.txt">Privacy Policy</a></label>
+                <label for="tos">I accept the <a href="/static/txt/TOS.txt" class="bold">TOS</a>, including <a
+                        href="/static/txt/PRIVACY.txt" class="bold">Privacy Policy</a></label>
             </div>
             <div>
-                <button type="submit">Register</button>
+                <button type="submit" class="fancy">Register</button>
             </div>
         </form>
     </main>
diff --git a/static/style.css b/static/style.css
index e2c5064..15f9089 100644
--- a/static/style.css
+++ b/static/style.css
@@ -9,6 +9,10 @@
     --button-submit-background-hover: linear-gradient(180deg, #ccb800, #ffe600);
     --button-submit-border: #8b6600;
     --button-submit-color: #302300;
+
+    --button-regular-background: #cacaca;
+    --button-regular-background-hover: #aaaaaa;
+    --button-regular-border: #676767;
 }
 
 * {
@@ -29,7 +33,7 @@ body {
 main {
     display: flex;
     flex-direction: column;
-    width: 50%;
+    width: 60%;
 }
 
 header {
@@ -39,8 +43,17 @@ header {
     justify-content: space-between;
 }
 
+table th {
+    text-align: left;
+    vertical-align: top;
+    padding: 8px;
+}
+
 a {
     color: var(--anchor);
+}
+
+a.bold {
     font-weight: bold;
 }
 
@@ -55,7 +68,19 @@ input[type=password] {
     border: 1px solid var(--box-primary-color);
 }
 
-button[type=submit] {
+button {
+    padding: 2px 6px;
+    background: var(--button-regular-background);
+    border: 1px solid var(--button-regular-border);
+    border-radius: 2px;
+}
+
+button:hover {
+    background: var(--button-regular-background-hover);
+    cursor: pointer;
+}
+
+button.fancy {
     padding: 4px 32px;
     font-size: 24px;
     background: var(--button-submit-background);
@@ -65,7 +90,7 @@ button[type=submit] {
     text-shadow: 0 1px 0 var(--button-submit-border);
 }
 
-button[type=submit]:hover {
+button.fancy:hover {
     background: var(--button-submit-background-hover);
     text-shadow: 0 -1px 0 var(--button-submit-border);
     cursor: pointer;
@@ -104,6 +129,18 @@ button[type=submit]:hover {
     flex-direction: row;
 }
 
+.align-bottom {
+    align-items: end;
+}
+
+.align-center {
+    align-items: center;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
 .gap-8 {
     gap: 8px;
 }