fix(website): diagonal chrome gradient on buttons

Author: NathanFlurry

packages/website/src/styles/global.css

@@ -166,7 +166,7 @@
   }
 
   .btn-chrome {
-    background: linear-gradient(180deg, #e8e8e8 0%, #ffffff 15%, #b0b0b0 50%, #d8d8d8 65%, #888888 100%);
+    background: linear-gradient(135deg, #e8e8e8 0%, #ffffff 20%, #a0a0a0 45%, #d0d0d0 60%, #888888 80%, #b8b8b8 100%);
     color: #111;
     font-weight: 600;
     border: 1px solid rgba(255, 255, 255, 0.3);
@@ -175,21 +175,21 @@
   }
 
   .btn-chrome:hover {
-    background: linear-gradient(180deg, #f0f0f0 0%, #ffffff 20%, #c0c0c0 50%, #e0e0e0 65%, #a0a0a0 100%);
+    background: linear-gradient(135deg, #f0f0f0 0%, #ffffff 25%, #b8b8b8 45%, #e0e0e0 60%, #a0a0a0 80%, #c8c8c8 100%);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.7);
   }
 
   .btn-chrome-outline {
-    background: linear-gradient(180deg, rgba(200,200,200,0.12) 0%, rgba(255,255,255,0.06) 50%, rgba(120,120,120,0.12) 100%);
+    background: linear-gradient(135deg, rgba(200,200,200,0.12) 0%, rgba(255,255,255,0.08) 40%, rgba(120,120,120,0.12) 70%, rgba(200,200,200,0.08) 100%);
     border: 1px solid;
-    border-image: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0.08)) 1;
+    border-image: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0.08)) 1;
     color: #d4d4d8;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   }
 
   .btn-chrome-outline:hover {
-    background: linear-gradient(180deg, rgba(200,200,200,0.18) 0%, rgba(255,255,255,0.10) 50%, rgba(120,120,120,0.18) 100%);
-    border-image: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0.12)) 1;
+    background: linear-gradient(135deg, rgba(200,200,200,0.18) 0%, rgba(255,255,255,0.12) 40%, rgba(120,120,120,0.18) 70%, rgba(200,200,200,0.12) 100%);
+    border-image: linear-gradient(135deg, rgba(255,255,255,0.4), rgba(255,255,255,0.12)) 1;
     color: #fff;
   }