diff --git a/docs/components/home/flows/Additional.vue b/docs/components/home/flows/Additional.vue
index cd1311e2..8d7d9b67 100644
--- a/docs/components/home/flows/Additional.vue
+++ b/docs/components/home/flows/Additional.vue
@@ -106,7 +106,7 @@ onPaneReady((i) => emit('pane', i))
         <br />
         Plus it's built for composition, making the access of the internal state easy as can be!
       </p>
-      <router-link class="button max-w-max" to="/guide/"> Documentation </router-link>
+      <router-link class="docs-button max-w-max" to="/guide/"> Documentation </router-link>
     </div>
   </div>
 </template>
diff --git a/docs/components/home/flows/Basic.vue b/docs/components/home/flows/Basic.vue
index 73b0c160..45c0d97e 100644
--- a/docs/components/home/flows/Basic.vue
+++ b/docs/components/home/flows/Basic.vue
@@ -111,7 +111,7 @@ onConnect((param) => {
         Vue Flow comes with built-in features like zoom & pan and dedicated controls, single & multi-selections, draggable
         elements, customizable nodes and edges and a bunch of event handlers.
       </p>
-      <router-link class="button max-w-max" to="/guide/"> Documentation </router-link>
+      <router-link class="docs-button max-w-max" to="/guide/"> Documentation </router-link>
     </div>
   </div>
   <div
diff --git a/docs/components/home/flows/Nested.vue b/docs/components/home/flows/Nested.vue
index 0436d7d9..261c7ca0 100644
--- a/docs/components/home/flows/Nested.vue
+++ b/docs/components/home/flows/Nested.vue
@@ -65,7 +65,7 @@ onPaneReady((i) => emit('pane', i))
         <br />
         No worries! Vue Flow supports creating nested nodes and nested graphs out-of-the-box.
       </p>
-      <router-link class="button max-w-max" to="/guide/"> Documentation </router-link>
+      <router-link class="docs-button max-w-max" to="/guide/"> Documentation </router-link>
     </div>
   </div>
   <div
diff --git a/docs/components/home/flows/RGB.vue b/docs/components/home/flows/RGB.vue
index 2d1c5add..7af38546 100644
--- a/docs/components/home/flows/RGB.vue
+++ b/docs/components/home/flows/RGB.vue
@@ -108,7 +108,7 @@ const nodeColor: MiniMapNodeFunc = (node) => {
         You can expand on the existing features by using your own custom nodes and edges and implement any design and
         functionality you want.
       </p>
-      <router-link class="button max-w-max" to="/guide/">Documentation</router-link>
+      <router-link class="docs-button max-w-max" to="/guide/">Documentation</router-link>
     </div>
   </div>
 </template>
diff --git a/docs/src/.vuepress/assets/index.css b/docs/src/.vuepress/assets/index.css
index e26a8451..9734ccf0 100644
--- a/docs/src/.vuepress/assets/index.css
+++ b/docs/src/.vuepress/assets/index.css
@@ -64,7 +64,7 @@ ul li {
   @apply mt-2;
 }
 
-.button {
+.docs-button {
   @apply z-1 shadow-lg transition-colors duration-200 text-white font-semibold text-lg mt-4 px-5 py-3 rounded-lg bg-green-500;
 }