diff --git a/theme/boost/scss/moodle/buttons.scss b/theme/boost/scss/moodle/buttons.scss
index b6b62e3e6f8..bee6408acc0 100644
--- a/theme/boost/scss/moodle/buttons.scss
+++ b/theme/boost/scss/moodle/buttons.scss
@@ -62,6 +62,15 @@ p.arrow_button {
     }
 }
 
+// Specific styles for the collapse/expand buttons.
+.btn.btn-icon.icons-collapse-expand {
+    color: $primary;
+    background-color: $primary-light-background;
+    &:hover {
+        outline: 2px solid $primary;
+    }
+}
+
 @mixin button-focus($background, $innershadow) {
     &:focus,
     &.focus {
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 8ba5690c500..efc5c0bddfa 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -35143,6 +35143,14 @@ p.arrow_button {
   line-height: 48px !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.btn.btn-icon.icons-collapse-expand {
+  color: #0f6cbf;
+  background-color: #f5f9fc;
+}
+.btn.btn-icon.icons-collapse-expand:hover {
+  outline: 2px solid #0f6cbf;
+}
+
 .btn-primary:focus, .btn-primary.focus {
   outline: 0.2rem solid #000102;
   box-shadow: inset 0 0 0 2px #fff;
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 5d6a658ebde..9144f95a54e 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -35143,6 +35143,14 @@ p.arrow_button {
   line-height: 48px !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.btn.btn-icon.icons-collapse-expand {
+  color: #0f6cbf;
+  background-color: #f5f9fc;
+}
+.btn.btn-icon.icons-collapse-expand:hover {
+  outline: 2px solid #0f6cbf;
+}
+
 .btn-primary:focus, .btn-primary.focus {
   outline: 0.2rem solid #000102;
   box-shadow: inset 0 0 0 2px #fff;