fx

public/css/styles.css

@@ -398,6 +398,11 @@ h1, h2, h3, h4, h5, h6 {
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
+.header__btn--secondary {
+  border: 1px solid var(--accent-color);
+  background: var(--accent-color);
+  color: #fff;
+}
 .header__btn--secondary:hover {
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

resources/sass/layout/_header.scss

@@ -99,7 +99,9 @@
         }
 
         &--secondary {
-            // background and color will be set dynamically
+            border: 1px solid var(--accent-color);
+            background: var(--accent-color);
+            color: #fff;
             &:hover {
                 transform: translateY(-1px);
                 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

resources/view/layouts/partials/header.php

@@ -35,7 +35,7 @@ $menuItems = json_decode($content['menu'] ?? '[]', true);
                 <button class="header__btn header__btn--primary redirect-js">
                     <?= htmlspecialchars($content['header_btn_1'] ?? 'Button 1') ?>
                 </button>
-                <button class="header__btn header__btn--secondary redirect-js">
+                <button class="header__btn header__btn--secondary  redirect-js">
                     <?= htmlspecialchars($content['header_btn_2'] ?? 'Button 2') ?>
                 </button>
             <?php endif; ?>