diff --git a/sampler/src/main/java/atlantafx/sampler/page/components/ButtonPage.java b/sampler/src/main/java/atlantafx/sampler/page/components/ButtonPage.java
index 511ef9e..107e87d 100755
--- a/sampler/src/main/java/atlantafx/sampler/page/components/ButtonPage.java
+++ b/sampler/src/main/java/atlantafx/sampler/page/components/ButtonPage.java
@@ -12,7 +12,6 @@ import javafx.scene.control.Button;
 import javafx.scene.control.ContentDisplay;
 import javafx.scene.layout.HBox;
 import javafx.scene.layout.VBox;
-import javafx.scene.shape.Circle;
 import org.kordamp.ikonli.feather.Feather;
 import org.kordamp.ikonli.javafx.FontIcon;
 import org.kordamp.ikonli.material2.Material2AL;
@@ -61,9 +60,7 @@ public final class ButtonPage extends OutlinePage {
         defaultBtn.setMnemonicParsing(true);
 
         var outlinedBtn = new Button("Out_lined");
-        outlinedBtn.getStyleClass().addAll(
-            Styles.BUTTON_OUTLINED, Styles.ACCENT
-        );
+        outlinedBtn.getStyleClass().addAll(Styles.BUTTON_OUTLINED);
         outlinedBtn.setMnemonicParsing(true);
 
         var flatBtn = new Button("_Flat");
diff --git a/sampler/src/main/java/atlantafx/sampler/page/components/MenuButtonPage.java b/sampler/src/main/java/atlantafx/sampler/page/components/MenuButtonPage.java
index 9c01edd..a0d904a 100755
--- a/sampler/src/main/java/atlantafx/sampler/page/components/MenuButtonPage.java
+++ b/sampler/src/main/java/atlantafx/sampler/page/components/MenuButtonPage.java
@@ -59,6 +59,14 @@ public final class MenuButtonPage extends OutlinePage {
         normalSplitBtn.setText("_Split Menu Button");
         normalSplitBtn.setMnemonicParsing(true);
 
+        var outlinedMenuBtn = new MenuButton("Outlined");
+        outlinedMenuBtn.getItems().setAll(createItems(5));
+        outlinedMenuBtn.getStyleClass().add(Styles.BUTTON_OUTLINED);
+
+        var outlinedSplitBtn = new SplitMenuButton(createItems(5));
+        outlinedSplitBtn.setText("Outlined");
+        outlinedSplitBtn.getStyleClass().add(Styles.BUTTON_OUTLINED);
+
         var flatMenuBtn = new MenuButton("Flat");
         flatMenuBtn.getItems().setAll(createItems(5));
         flatMenuBtn.getStyleClass().add(Styles.FLAT);
@@ -70,7 +78,9 @@ public final class MenuButtonPage extends OutlinePage {
 
         var box = new FlowPane(
             HGAP_20, VGAP_10,
-            normalMenuBtn, normalSplitBtn, flatMenuBtn, flatSplitBtn
+            normalMenuBtn, normalSplitBtn,
+            outlinedMenuBtn, outlinedSplitBtn,
+            flatMenuBtn, flatSplitBtn
         );
 
         var description = BBCodeParser.createFormattedText("""
@@ -184,6 +194,19 @@ public final class MenuButtonPage extends OutlinePage {
         normalSplitBtn.setGraphic(new FontIcon(Feather.MORE_HORIZONTAL));
         normalSplitBtn.getStyleClass().addAll(Styles.BUTTON_ICON);
 
+        var outlinedMenuBtn = new MenuButton();
+        outlinedMenuBtn.setGraphic(new FontIcon(Feather.MORE_HORIZONTAL));
+        outlinedMenuBtn.getItems().setAll(createItems(5));
+        outlinedMenuBtn.getStyleClass().addAll(
+            Styles.BUTTON_ICON, Styles.BUTTON_OUTLINED
+        );
+
+        var outlinedSplitBtn = new SplitMenuButton(createItems(5));
+        outlinedSplitBtn.setGraphic(new FontIcon(Feather.MORE_HORIZONTAL));
+        outlinedSplitBtn.getStyleClass().addAll(
+            Styles.BUTTON_ICON, Styles.BUTTON_OUTLINED
+        );
+
         var accentMenuBtn = new MenuButton();
         accentMenuBtn.setGraphic(new FontIcon(Feather.MENU));
         accentMenuBtn.getItems().setAll(createItems(5));
@@ -200,7 +223,9 @@ public final class MenuButtonPage extends OutlinePage {
 
         var box = new FlowPane(
             HGAP_20, VGAP_10,
-            normalMenuBtn, normalSplitBtn, accentMenuBtn, accentSplitBtn
+            normalMenuBtn, normalSplitBtn,
+            outlinedMenuBtn, outlinedSplitBtn,
+            accentMenuBtn, accentSplitBtn
         );
         var description = BBCodeParser.createFormattedText("""
             You can hide the [i]MenuButton[/i] text by applying [code]Styles.BUTTON_ICON[/code] \
diff --git a/styles/src/components/_button.scss b/styles/src/components/_button.scss
index b4cf62d..b2b5ddd 100755
--- a/styles/src/components/_button.scss
+++ b/styles/src/components/_button.scss
@@ -361,6 +361,13 @@ $color-shadow: -color-shadow-default !default;
     }
   }
 
+  &.button-outlined {
+    -color-button-bg:       -color-bg-default;
+    -color-button-fg:       $color-fg;
+    -color-button-bg-hover: $color-bg-hover;
+    -color-button-fg-hover: $color-fg-hover;
+  }
+
   &:default,
   &.accent {
     @include accent();
diff --git a/styles/src/components/_menu-button.scss b/styles/src/components/_menu-button.scss
index 2c2a56a..268fa97 100644
--- a/styles/src/components/_menu-button.scss
+++ b/styles/src/components/_menu-button.scss
@@ -111,6 +111,13 @@ $separator-width:    0.75px !default;
     }
   }
 
+  &.button-outlined {
+    -color-button-bg:       -color-bg-default;
+    -color-button-fg:       button.$color-fg;
+    -color-button-bg-hover: button.$color-bg-hover;
+    -color-button-fg-hover: button.$color-fg-hover;
+  }
+
   &.accent {
     @include button.accent();
   }
@@ -189,7 +196,16 @@ $separator-width:    0.75px !default;
   &.button-outlined:hover,
   &.button-outlined:focused {
     >.arrow-button {
-      -color-button-fg: -color-fg-emphasis;
+      -color-button-fg: -color-fg-default;
+    }
+
+    &:default,
+    &.accent,
+    &.success,
+    &.danger {
+      >.arrow-button {
+        -color-button-fg: -color-fg-emphasis;
+      }
     }
   }