diff --git a/packages/lexical-website/src/components/HomepageExamples/index.js b/packages/lexical-website/src/components/HomepageExamples/index.js
index b60e64392c4..5189561dc03 100644
--- a/packages/lexical-website/src/components/HomepageExamples/index.js
+++ b/packages/lexical-website/src/components/HomepageExamples/index.js
@@ -71,7 +71,7 @@ export default function HomepageExamples() {
           {EXAMPLES.map(({id, label}) => (
             <Tabs.Trigger asChild={true} value={id} key={id}>
               <li
-                className={`cursor-pointer list-none rounded-md px-4 py-1 font-bold transition-colors hover:bg-[#f2f2f2] ${
+                className={`button--text cursor-pointer list-none rounded-md px-4 py-1 font-bold transition-colors hover:bg-[#f2f2f2] ${
                   activeItemID === id && 'pills__item--active'
                 }`}
                 tabIndex={0}
diff --git a/packages/lexical-website/src/css/custom.css b/packages/lexical-website/src/css/custom.css
index c0f0ac3ffc1..b777d566023 100644
--- a/packages/lexical-website/src/css/custom.css
+++ b/packages/lexical-website/src/css/custom.css
@@ -44,3 +44,7 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
 html[data-theme='dark'] .button--outline:hover {
   color: white;
 }
+
+html[data-theme='dark'] .button--text:hover {
+  color: rgba(0, 0, 0, 0.5);
+}