fix: Rework CTA button to match probabl website

Author: glemaitre

src/assets/css/components.css

@@ -974,31 +974,11 @@
   color: var(--text-inverse);
 }
 
-/* "Open in JupyterLite" CTA — same pill geometry as other card actions. */
+/* "Open in JupyterLite" CTA — compact primary on use-case cards */
 .btn--open-lab {
-  font-family: var(--brand-typography--texte);
-  font-size: var(--brand-typography-size--body-s);
-  font-weight: 500;
-  letter-spacing: 0;
   height: 32px;
   padding: 0 14px;
-  background: var(--color-orange);
-  color: var(--color-near-black);
-  border: none;
-  border-radius: var(--radius-full);
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
   gap: 6px;
-  text-decoration: none;
-  transition: opacity var(--duration-sm) var(--ease-out);
-}
-/* Pin background + text on hover so the global `a:hover { color: orange }`
-   rule doesn't make the label disappear into the orange background. */
-.btn--open-lab:hover {
-  background: var(--color-orange);
-  color: var(--color-near-black);
-  opacity: 0.92;
 }
 
 /* Square GitHub link button — matches adjacent button height */
@@ -1422,32 +1402,13 @@
   border-color: var(--text-inverse);
 }
 
-/* Orange CTA — used on both card types */
+/* Orange CTA — release cards; colors/hover from .btn--primary */
 .btn--cta {
-  background: var(--color-orange);
-  color: var(--color-near-black);
-  border: none;
   font-family: var(--font-mono);
   font-size: var(--text-xs);
   font-weight: 700;
   letter-spacing: 0.04em;
   padding: var(--space-2) var(--space-4);
   border-radius: var(--radius-sm);
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
   gap: var(--space-1);
-  text-decoration: none;
-  transition: opacity 0.15s;
-}
-
-.btn--cta,
-.btn--cta:hover,
-.btn--cta:visited {
-  color: var(--color-near-black);
-}
-
-.btn--cta:hover {
-  opacity: 0.88;
-  color: var(--color-near-black);
 }

src/assets/css/design-system.css

@@ -358,7 +358,7 @@ a {
   transition: color var(--duration-sm) var(--ease);
 }
 
-a:hover { color: var(--color-orange); }
+a:where(:not([class*='btn'])):hover { color: var(--color-orange); }
 
 img, svg { display: block; max-width: 100%; }
 
@@ -502,27 +502,31 @@ button, input, select, textarea {
   box-shadow: var(--focus-ring-sky-strong);
 }
 
-.btn:hover { opacity: 0.92; }
+.btn:hover:not(.btn--primary) { opacity: 0.92; }
 /* Press feedback — makes the UI feel like it heard the click.
    transform: scale stays GPU-accelerated and runs in 160 ms. */
 .btn:active {
   opacity: 0.85;
   transform: scale(0.97);
 }
 
-/* Primary — orange fill on midnight, dark fill on light */
+/* Primary — Probabl .button: orange fill, outline on hover */
 .btn--primary,
-.btn--primary:hover,
-.btn--primary:visited {
+.btn--primary:visited,
+a.btn--primary,
+a.btn--primary:visited {
   background: var(--color-orange);
   color: var(--color-near-black);
+  border: 1px solid transparent;
   text-decoration: none;
 }
 
-.btn--primary:hover {
-  background: var(--color-orange);
-  color: var(--color-near-black);
-  opacity: 0.92;
+.btn--primary:hover,
+a.btn--primary:hover {
+  background: transparent;
+  border-color: var(--color-orange);
+  color: var(--color-orange);
+  opacity: 1;
 }
 
 /* Ghost — transparent w/ hairline, used on dark headers */

src/components/ReleaseCard.vue

@@ -176,7 +176,7 @@ const outlineClass = computed(() =>
       >
         RELEASE NOTES
       </a>
-      <a :href="ctaLink" target="_blank" rel="noopener" class="btn btn--sm btn--cta">
+      <a :href="ctaLink" target="_blank" rel="noopener" class="btn btn--primary btn--sm btn--cta">
         {{ ctaLabel }}
       </a>
       <a

src/components/SklearnHero.vue

@@ -111,7 +111,7 @@ const { copied, copyInstall } = useCopyPipInstall(() => props.core.pypi_name)
             :href="core.website"
             target="_blank"
             rel="noopener noreferrer"
-            class="link filled"
+            class="link btn btn--primary"
           >
             <i class="fas fa-house" aria-hidden="true"></i><span>Homepage</span>
           </a>
@@ -287,8 +287,6 @@ const { copied, copyInstall } = useCopyPipInstall(() => props.core.pypi_name)
 .link {
   padding: 9px 18px;
   border-radius: var(--radius-full);
-  border: 1px solid var(--border-on-dark-strong);
-  color: var(--text-inverse);
   font-family: var(--font-sans);
   font-size: 13px;
   font-weight: 500;
@@ -301,6 +299,18 @@ const { copied, copyInstall } = useCopyPipInstall(() => props.core.pypi_name)
     color var(--duration-md) var(--ease-out);
 }
 
+.link:not(.btn--primary) {
+  border: 1px solid var(--border-on-dark-strong);
+  color: var(--text-inverse);
+}
+
+a.link.btn--primary:hover {
+  background: transparent;
+  border-color: var(--color-orange);
+  color: var(--color-orange);
+  opacity: 1;
+}
+
 button.link {
   font: inherit;
   cursor: pointer;
@@ -311,7 +321,7 @@ button.link {
   gap: var(--space-2);
 }
 
-a.link:hover,
+a.link:hover:not(.btn--primary),
 button.link.link--pip:hover {
   background: var(--surface-on-dark-faint);
   border-color: var(--border-on-dark-stronger);
@@ -328,19 +338,6 @@ button.link.link--pip:hover {
   opacity: 1;
 }
 
-.link.filled {
-  background: var(--color-orange);
-  border-color: var(--color-orange);
-  color: var(--color-near-black);
-}
-
-.link.filled:hover {
-  background: var(--color-orange);
-  border-color: var(--color-orange);
-  color: var(--color-near-black);
-  opacity: 0.92;
-}
-
 button.link.link--pip {
   font-family: var(--font-mono);
   font-size: 13px;

src/components/UseCaseCard.vue

@@ -139,7 +139,7 @@ async function copyLink(): Promise<void> {
           :href="jupyterliteUrl"
           target="_blank"
           rel="noopener"
-          class="btn--open-lab"
+          class="btn btn--primary btn--open-lab"
           title="Open this use case in JupyterLite (Pyodide kernel, runs in your browser)"
         >
           <i class="fas fa-flask"></i> Open in JupyterLite