probably have to do it like this..

assets/sass/user_styles.scss

@@ -31,10 +31,17 @@ body {
   text-decoration: none;
 }
 
-.fsfw-doc-button {
-  @extend .content-button;
+.content-button-text {
+  color: #ffffff;
+  padding-top: 1.0rem;
+  padding-bottom: 1.0rem;
 }
 
-.fsfw-doc-button {
-  @extend .content-button;
+.content-button-bg {
+  background-color: #004191;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
 }

content/projects/fsfw/index.html

@@ -15,7 +15,7 @@ draft = false
     <div class="col text-end">
       <a
         type="button"
-        class="fsfw-doc-button"
+        class="content-button"
         href="https://documentation.irs.uni-stuttgart.de/projects/fsfw/development/"
       >
         DEVELOP
@@ -24,7 +24,7 @@ draft = false
     <div class="col text-start">
       <a
         type="button"
-        class="fsfw-doc-button text-start"
+        class="content-button"
         href="https://documentation.irs.uni-stuttgart.de/projects/fsfw/master/"
       >
         MASTER
@@ -37,7 +37,7 @@ draft = false
     <div class="col">
       <a
         href="https://documentation.irs.uni-stuttgart.de/projects/fsfw/coverage/development/"
-        class="fsfw-doc-button"
+        class="content-button"
         target="_blank"
         >gitea</a
       >
@@ -49,7 +49,7 @@ draft = false
     <div class="col text-end">
       <a
         href="https://documentation.irs.uni-stuttgart.de/projects/fsfw/coverage/development/"
-        class="fsfw-doc-button"
+        class="content-button"
         target="_blank"
         >DEVELOP</a
       >
@@ -57,7 +57,7 @@ draft = false
     <div class="col text-start">
       <a
         href="https://documentation.irs.uni-stuttgart.de/projects/fsfw/coverage/master/"
-        class="fsfw-doc-button"
+        class="content-button"
         target="_blank"
         >MASTER</a
       >

content/projects/sat-rs/index.html

@@ -7,29 +7,31 @@ draft = false
 <div class="container text-center">
   <img src="sat-rs_logo.png" class="img-fluid mx-auto my-3 w-50" />
   <div class="d-flex justify-content-center mx-auto w-75">
-    <p class="text-justify">
-      <p class="text-justify">{{% content "description.md" %}}</p>
-    </p>
+    <p class="text-justify">{{% content "description.md" %}}</p>
   </div>
 
   <h2><i class="bi bi-file-text"></i> Documentation</h2>
   <div class="row row-cols-2 w-50 mx-auto my-4 gx-3">
     <div class="col text-end">
       <a
-        type="button"
-        class="content-button"
         href="/projects/sat-rs/book"
+        class="col d-flex flex-column justify-content-center text-decoration-none"
+        target="_blank"
       >
-        BOOK
+        <span class="content-button-bg">
+          <span class="content-button-text">BOOK</span>
+        </span>
       </a>
     </div>
     <div class="col text-start">
       <a
-        type="button"
-        class="fsfw-doc-button text-start"
         href="https://docs.rs/satrs-core"
+        class="col d-flex flex-column justify-content-center text-decoration-none"
+        target="_blank"
       >
-        CORE API
+        <span class="content-button-bg">
+          <span class="content-button-text">CORE API</span>
+        </span>
       </a>
     </div>
   </div>
@@ -39,30 +41,41 @@ draft = false
     <div class="col text-end">
       <a
         href="https://egit.irs.uni-stuttgart.de/rust/sat-rs"
-        class="content-button"
+        class="col d-flex flex-column justify-content-center text-decoration-none"
         target="_blank"
-        >GITEA</a
       >
+        <span class="content-button-bg">
+          <span class="content-button-text">GITEA</span>
+        </span>
+      </a>
     </div>
     <div class="col text-start">
       <a
         href="https://github.com/us-irs/sat-rs"
-        class="content-button"
+        class="col d-flex flex-column justify-content-center text-decoration-none"
         target="_blank"
-        >GITHUB (MIRROR)</a
       >
+        <span class="content-button-bg">
+          <span class="content-button-text">GITHUB (MIRROR)</span>
+        </span>
+      </a>
     </div>
   </div>
 
   <h2>Examples</h2>
   <div class="row w-25 mx-auto pb-3 my-3">
+
     <div class="col">
+
       <a
         href="https://egit.irs.uni-stuttgart.de/rust/sat-rs/src/branch/main/satrs-example"
-        class="content-button"
+        class="col d-flex flex-column justify-content-center text-decoration-none"
         target="_blank"
-        >EXAMPLE APP</a
       >
+        <span class="content-button-bg">
+          <span class="content-button-text">EXAMPLE APP</span>
+        </span>
+      </a>
     </div>
   </div>
 </div>

layouts/index.html

@@ -13,13 +13,13 @@
           href="projects/fsfw"
           class="col d-flex flex-column justify-content-center text-decoration-none"
         >
-          <div
+          <span
             class="bg-body-tertiary rounded d-flex flex-column flex-wrap justify-content-center my-2"
           >
             <h2 class="display-6 py-5 mx-2">
               Flight Software Framework (FSFW)
             </h2>
-          </div>
+          </span>
         </a>
 
         <a