feat(website): chrome metallic button styling

Author: NathanFlurry

packages/website/src/components/FooterCTA.tsx

@@ -18,12 +18,12 @@ export function FooterCTA() {
             Get started in minutes
           </h2>
           <p className="mb-8 mx-auto max-w-lg text-base text-zinc-500 leading-relaxed">
-            Install Secure Exec, create a runtime, and execute untrusted code — all in a few lines of TypeScript.
+            Install Secure Exec, create a runtime, and execute untrusted code. All in a few lines of TypeScript.
           </p>
           <div className="flex flex-col gap-3 sm:flex-row justify-center">
             <a
               href="/docs"
-              className="selection-dark inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-white px-6 py-3 text-sm font-medium text-black transition-colors hover:bg-zinc-200"
+              className="selection-dark inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md btn-chrome px-6 py-3 text-sm transition-all"
             >
               Read the Docs
               <ArrowRight className="h-4 w-4" />
@@ -32,7 +32,7 @@ export function FooterCTA() {
               href="https://github.com/rivet-dev/secure-exec"
               target="_blank"
               rel="noreferrer"
-              className="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border border-white/10 px-6 py-3 text-sm font-medium text-white transition-colors hover:border-white/20 hover:bg-white/[0.04]"
+              className="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md btn-chrome-outline px-6 py-3 text-sm font-medium transition-all"
             >
               <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                 <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />

packages/website/src/components/Hero.tsx

@@ -216,7 +216,7 @@ const CopyInstallButton = () => {
   return (
     <button
       onClick={handleCopy}
-      className="w-full sm:w-auto inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border border-white/10 px-4 py-2 text-sm text-zinc-300 transition-colors hover:border-white/20 hover:text-white font-mono"
+      className="w-full sm:w-auto inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md btn-chrome-outline px-4 py-2.5 text-sm transition-all font-mono"
     >
       {copied ? <Check className="h-4 w-4 text-green-400" /> : <Terminal className="h-4 w-4 flex-shrink-0" />}
       <span>{installCommand}</span>
@@ -321,7 +321,7 @@ export function Hero() {
             >
               <a
                 href="/docs"
-                className="selection-dark inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-white px-5 py-2.5 text-sm font-medium text-black transition-colors hover:bg-zinc-200"
+                className="selection-dark inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md btn-chrome px-5 py-2.5 text-sm transition-all"
               >
                 Get Started
                 <ArrowRight className="h-4 w-4" />

packages/website/src/components/ui/Button.tsx

@@ -13,8 +13,8 @@ export function Button({ children, variant = "primary", size = "md", href, onCli
   const baseStyles = "inline-flex items-center justify-center font-medium rounded-lg transition-all";
 
   const variants = {
-    primary: "bg-white text-black hover:bg-zinc-200",
-    secondary: "bg-[#0f0f11] border border-white/10 text-white hover:bg-white/[0.06]",
+    primary: "btn-chrome",
+    secondary: "btn-chrome-outline",
     ghost: "text-zinc-400 hover:text-white",
   };
 

packages/website/src/styles/global.css

@@ -165,6 +165,34 @@
     pointer-events: none;
   }
 
+  .btn-chrome {
+    background: linear-gradient(180deg, #e8e8e8 0%, #ffffff 15%, #b0b0b0 50%, #d8d8d8 65%, #888888 100%);
+    color: #111;
+    font-weight: 600;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+  }
+
+  .btn-chrome:hover {
+    background: linear-gradient(180deg, #f0f0f0 0%, #ffffff 20%, #c0c0c0 50%, #e0e0e0 65%, #a0a0a0 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%);
+    border: 1px solid;
+    border-image: linear-gradient(180deg, 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;
+    color: #fff;
+  }
+
   .glow-accent {
     box-shadow: 0 0 20px rgba(204, 0, 0, 0.3);
   }