diff --git a/src/pages/index.js b/src/pages/index.js
index 89b9939..6cb3bed 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -57,7 +57,7 @@ function Hero() {
               <Link className={clsx('button button--primary button--lg', styles.ctaPrimary)} to="/getting-started/installation">
                 Get started
               </Link>
-              <Link className={clsx('button button--secondary button--lg', styles.ctaSecondary)} to="/tour/basics">
+              <Link className={clsx('button button--secondary button--lg', styles.heroSecondaryCta)} to="/tour/basics">
                 Take the tour
               </Link>
               <Link className={styles.ctaGhost} to="/drivers">
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 8f412f7..0b54b2f 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -64,12 +64,27 @@
   background: var(--ifm-color-primary);
   border: none;
 }
+.ctaPrimary:hover {
+  background: var(--ifm-color-primary-darker);
+}
 
 .ctaSecondary {
   background: transparent;
   border: 1px solid var(--ifm-color-emphasis-300);
 }
 
+.heroSecondaryCta {
+  /* background: transparent; */
+  border: 1px solid var(--ifm-color-emphasis-300);
+  color: var(--ifm-color-content-secondary);
+}
+
+.heroSecondaryCta:hover {
+  border-color: var(--ifm-color-primary-lighter);
+  color: rgb(157, 156, 156);
+  background: var(--ifm-hero-background-color);
+}
+
 .ctaGhost {
   padding: 0 0.5rem;
   font-weight: 500;