diff --git a/src/addons/block/timeline/components/events/addon-block-timeline-events.html b/src/addons/block/timeline/components/events/addon-block-timeline-events.html
index 68a2ac180..4bb4161f4 100644
--- a/src/addons/block/timeline/components/events/addon-block-timeline-events.html
+++ b/src/addons/block/timeline/components/events/addon-block-timeline-events.html
@@ -68,7 +68,7 @@
 
 <div class="ion-padding ion-text-center" *ngIf="canLoadMore && !empty">
     <!-- Button and spinner to show more attempts. -->
-    <ion-button expand="block" (click)="loadMoreEvents()" color="light" *ngIf="!loadingMore">
+    <ion-button expand="block" (click)="loadMoreEvents()" fill="outline" *ngIf="!loadingMore">
         {{ 'core.loadmore' | translate }}
     </ion-button>
     <ion-spinner *ngIf="loadingMore" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
diff --git a/src/addons/calendar/pages/edit-event/edit-event.html b/src/addons/calendar/pages/edit-event/edit-event.html
index 6c28db54b..b02c1cf05 100644
--- a/src/addons/calendar/pages/edit-event/edit-event.html
+++ b/src/addons/calendar/pages/edit-event/edit-event.html
@@ -235,16 +235,16 @@
             <ion-item>
                 <ion-label>
                     <ion-row>
+                        <ion-col *ngIf="hasOffline && eventId && eventId < 0">
+                            <ion-button expand="block" fill="outline" (click)="discard()">
+                                {{ 'core.discard' | translate }}
+                            </ion-button>
+                        </ion-col>
                         <ion-col>
                             <ion-button expand="block" (click)="submit()" [disabled]="!form.valid" type="submit">
                                 {{ 'core.save' | translate }}
                             </ion-button>
                         </ion-col>
-                        <ion-col *ngIf="hasOffline && eventId && eventId < 0">
-                            <ion-button expand="block" color="light" (click)="discard()">
-                                {{ 'core.discard' | translate }}
-                            </ion-button>
-                        </ion-col>
                     </ion-row>
                 </ion-label>
             </ion-item>
diff --git a/src/addons/messages/pages/discussion/discussion.html b/src/addons/messages/pages/discussion/discussion.html
index 68417d729..fc9dd7c3c 100644
--- a/src/addons/messages/pages/discussion/discussion.html
+++ b/src/addons/messages/pages/discussion/discussion.html
@@ -157,7 +157,7 @@
             <ion-button expand="block" class="ion-text-wrap ion-margin-bottom" (click)="confirmContactRequest()">
                 {{ 'addon.messages.acceptandaddcontact' | translate }}
             </ion-button>
-            <ion-button expand="block" class="ion-text-wrap ion-margin-bottom" color="light" (click)="declineContactRequest()">
+            <ion-button expand="block" class="ion-text-wrap ion-margin-bottom" fill="outline" (click)="declineContactRequest()">
                 {{ 'addon.messages.decline' | translate }}
             </ion-button>
         </div>
diff --git a/src/addons/messages/pages/search/search.html b/src/addons/messages/pages/search/search.html
index 6c5d98f08..133b5c5ae 100644
--- a/src/addons/messages/pages/search/search.html
+++ b/src/addons/messages/pages/search/search.html
@@ -68,7 +68,7 @@
         <!-- Load more button for contacts and non-contacts -->
         <ng-container *ngIf="item.type != 'messages'">
             <div class="ion-padding-horizontal" *ngIf="item.canLoadMore && !item.loadingMore">
-                <ion-button expand="block" color="light" (click)="search(query, item.type)">
+                <ion-button expand="block" fill="outline" (click)="search(query, item.type)">
                     {{ 'core.loadmore' | translate }}
                 </ion-button>
             </div>
diff --git a/src/addons/mod/chat/pages/chat/chat.html b/src/addons/mod/chat/pages/chat/chat.html
index 558eb4165..0fc26f280 100644
--- a/src/addons/mod/chat/pages/chat/chat.html
+++ b/src/addons/mod/chat/pages/chat/chat.html
@@ -119,7 +119,7 @@
             (onSubmit)="sendMessage($event)" [placeholder]="'addon.messages.newmessage' | translate">
         </core-send-message-form>
 
-        <ion-button *ngIf="isOnline && !polling && loaded" (click)="reconnect()" expand="block" color="light">
+        <ion-button *ngIf="isOnline && !polling && loaded" (click)="reconnect()" expand="block" fill="outline">
             {{ 'core.login.reconnect' | translate }}
         </ion-button>
     </ion-toolbar>
diff --git a/src/addons/mod/forum/components/post/post.html b/src/addons/mod/forum/components/post/post.html
index 4cbc6f849..a5e99970d 100644
--- a/src/addons/mod/forum/components/post/post.html
+++ b/src/addons/mod/forum/components/post/post.html
@@ -134,15 +134,15 @@
         </ng-container>
         <ion-grid>
             <ion-row>
+                <ion-col>
+                    <ion-button expand="block" fill="outline" (click)="cancel()">{{ 'core.cancel' | translate }}</ion-button>
+                </ion-col>
                 <ion-col>
                     <ion-button expand="block" (click)="send()" [disabled]="formData.subject == '' || formData.message == null">
                         <span *ngIf="formData.isEditing">{{ 'core.savechanges' | translate }}</span>
                         <span *ngIf="!formData.isEditing">{{ 'addon.mod_forum.posttoforum' | translate }}</span>
                     </ion-button>
                 </ion-col>
-                <ion-col>
-                    <ion-button expand="block" color="light" (click)="cancel()">{{ 'core.cancel' | translate }}</ion-button>
-                </ion-col>
             </ion-row>
         </ion-grid>
     </form>
diff --git a/src/addons/mod/forum/pages/new-discussion/new-discussion.html b/src/addons/mod/forum/pages/new-discussion/new-discussion.html
index 748509102..efe7b9dc0 100644
--- a/src/addons/mod/forum/pages/new-discussion/new-discussion.html
+++ b/src/addons/mod/forum/pages/new-discussion/new-discussion.html
@@ -69,15 +69,15 @@
             <ion-item>
                 <ion-label>
                     <ion-row>
+                        <ion-col *ngIf="hasOffline">
+                            <ion-button expand="block" fill="outline" (click)="discard()">{{ 'core.discard' | translate }}</ion-button>
+                        </ion-col>
                         <ion-col>
                             <ion-button expand="block" [disabled]="newDiscussion.subject == '' || newDiscussion.message == null"
                                 (click)="add()">
                                 {{ 'addon.mod_forum.posttoforum' | translate }}
                             </ion-button>
                         </ion-col>
-                        <ion-col *ngIf="hasOffline">
-                            <ion-button expand="block" color="light" (click)="discard()">{{ 'core.discard' | translate }}</ion-button>
-                        </ion-col>
                     </ion-row>
                 </ion-label>
             </ion-item>
diff --git a/src/addons/mod/lesson/pages/user-retake/user-retake.html b/src/addons/mod/lesson/pages/user-retake/user-retake.html
index 5c4a27e7a..872b6577a 100644
--- a/src/addons/mod/lesson/pages/user-retake/user-retake.html
+++ b/src/addons/mod/lesson/pages/user-retake/user-retake.html
@@ -113,7 +113,7 @@
                                         <!-- Content page, display a button and the content. -->
                                         <ion-row>
                                             <ion-col>
-                                                <ion-button expand="block" class="ion-text-wrap" color="light" [disabled]="true">
+                                                <ion-button expand="block" class="ion-text-wrap" fill="outline" [disabled]="true">
                                                     {{ answer[0].buttonText }}
                                                 </ion-button>
                                             </ion-col>
diff --git a/src/addons/mod/quiz/pages/review/review.html b/src/addons/mod/quiz/pages/review/review.html
index a83b93d8d..068dc2a6f 100644
--- a/src/addons/mod/quiz/pages/review/review.html
+++ b/src/addons/mod/quiz/pages/review/review.html
@@ -125,13 +125,13 @@
     <ion-grid>
         <ion-row class="ion-align-items-center">
             <ion-col class="ion-text-start">
-                <ion-button color="light" *ngIf="previousPage >= 0" (click)="changePage(previousPage)"
+                <ion-button fill="outline" *ngIf="previousPage >= 0" (click)="changePage(previousPage)"
                     [title]="'core.previous' | translate">
                     <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
                 </ion-button>
             </ion-col>
             <ion-col class="ion-text-end">
-                <ion-button color="light" *ngIf="nextPage >= -1" (click)="changePage(nextPage)" [attr.aria-label]="'core.next' | translate">
+                <ion-button *ngIf="nextPage >= -1" (click)="changePage(nextPage)" [attr.aria-label]="'core.next' | translate">
                     <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
                 </ion-button>
             </ion-col>
diff --git a/src/addons/notifications/pages/list/list.html b/src/addons/notifications/pages/list/list.html
index 64bfcc028..0630a22d2 100644
--- a/src/addons/notifications/pages/list/list.html
+++ b/src/addons/notifications/pages/list/list.html
@@ -17,7 +17,7 @@
     </ion-refresher>
     <core-loading [hideUntil]="notificationsLoaded">
         <div class="ion-padding" *ngIf="canMarkAllNotificationsAsRead">
-            <ion-button [disabled]="loadingMarkAllNotificationsAsRead" expand="block" (click)="markAllNotificationsAsRead()" color="light">
+            <ion-button [disabled]="loadingMarkAllNotificationsAsRead" expand="block" (click)="markAllNotificationsAsRead()" fill="outline">
                 <ion-icon slot="start" name="fas-check" aria-hidden="true" *ngIf="!loadingMarkAllNotificationsAsRead"></ion-icon>
                 <ion-spinner slot="start" [attr.aria-label]="'core.loading' | translate" *ngIf="loadingMarkAllNotificationsAsRead">
                 </ion-spinner>
diff --git a/src/addons/qtype/multichoice/component/addon-qtype-multichoice.html b/src/addons/qtype/multichoice/component/addon-qtype-multichoice.html
index b94cebadc..da99394bc 100644
--- a/src/addons/qtype/multichoice/component/addon-qtype-multichoice.html
+++ b/src/addons/qtype/multichoice/component/addon-qtype-multichoice.html
@@ -62,7 +62,7 @@
             <ion-icon *ngIf="option.isCorrect === 0" class="core-correct-icon" name="fas-times" color="danger"
                 [attr.aria-label]="'core.question.incorrect' | translate"></ion-icon>
         </ion-item>
-        <ion-button *ngIf="!multiQuestion.disabled" class="ion-text-wrap ion-margin" expand="full" color="light"
+        <ion-button *ngIf="!multiQuestion.disabled" class="ion-text-wrap ion-margin-top" expand="block" fill="outline"
             [disabled]="!multiQuestion.singleChoiceModel" (click)="clear()" type="reset">
             {{ 'addon.mod_quiz.clearchoice' | translate }}
         </ion-button>
diff --git a/src/core/components/infinite-loading/core-infinite-loading.html b/src/core/components/infinite-loading/core-infinite-loading.html
index 333c14f76..8cb69a24d 100644
--- a/src/core/components/infinite-loading/core-infinite-loading.html
+++ b/src/core/components/infinite-loading/core-infinite-loading.html
@@ -1,9 +1,9 @@
 <ng-container *ngIf="!loadingMore && position != 'top'">
     <div *ngIf="enabled || error" class="ion-padding-horizontal" #bottombutton>
-        <ion-button *ngIf="!error" expand="block" (click)="loadMore()" color="light">
+        <ion-button *ngIf="!error" expand="block" (click)="loadMore()" fill="outline">
             {{ 'core.loadmore' | translate }}
         </ion-button>
-        <ion-button *ngIf="error" expand="block" (click)="loadMore()" color="light">
+        <ion-button *ngIf="error" expand="block" (click)="loadMore()" fill="outline">
             {{ 'core.tryagain' | translate }}
         </ion-button>
     </div>
@@ -15,10 +15,10 @@
 
 <ng-container *ngIf="!loadingMore && position == 'top'">
     <div *ngIf="enabled || error" class="ion-padding-horizontal" #topbutton>
-        <ion-button *ngIf="!error" expand="block" (click)="loadMore()" color="light">
+        <ion-button *ngIf="!error" expand="block" (click)="loadMore()" fill="outline">
             {{ 'core.loadmore' | translate }}
         </ion-button>
-        <ion-button *ngIf="error" expand="block" (click)="loadMore()" color="light">
+        <ion-button *ngIf="error" expand="block" (click)="loadMore()" fill="outline">
             {{ 'core.tryagain' | translate }}
         </ion-button>
     </div>
diff --git a/src/core/components/recaptcha/core-recaptcha.html b/src/core/components/recaptcha/core-recaptcha.html
index d332e8958..102ddefc2 100644
--- a/src/core/components/recaptcha/core-recaptcha.html
+++ b/src/core/components/recaptcha/core-recaptcha.html
@@ -1,7 +1,7 @@
 <!-- ReCAPTCHA V2 -->
 <div *ngIf="publicKey && siteUrl && model">
     <!-- A button to open the recaptcha modal. -->
-    <ion-button expand="block" color="light" class="ion-margin" *ngIf="!model[modelValueName]" (click)="answerRecaptcha()">
+    <ion-button expand="block" fill="outline" class="ion-margin" *ngIf="!model[modelValueName]" (click)="answerRecaptcha()">
         {{ 'core.opensecurityquestion' | translate }}
     </ion-button>
     <ion-item *ngIf="model[modelValueName]">
diff --git a/src/core/features/login/components/site-onboarding/site-onboarding.html b/src/core/features/login/components/site-onboarding/site-onboarding.html
index cd000ea2b..403c74200 100644
--- a/src/core/features/login/components/site-onboarding/site-onboarding.html
+++ b/src/core/features/login/components/site-onboarding/site-onboarding.html
@@ -24,10 +24,10 @@
         </h3>
 
         <div *ngIf="step == 0" class="core-login-onboarding-step">
-            <ion-button expand="block" (click)="skip($event)" class="ion-margin-bottom" color="light">
+            <ion-button expand="block" (click)="skip($event)" class="ion-margin-bottom" fill="outline">
                 {{'core.login.onboardingimalearner' | translate}}
             </ion-button>
-            <ion-button expand="block" (click)="next($event)" class="ion-margin-bottom" color="light">
+            <ion-button expand="block" (click)="next($event)" class="ion-margin-bottom" fill="outline">
                 {{'core.login.onboardingimaneducator' | translate}}
             </ion-button>
         </div>
@@ -36,7 +36,7 @@
             <p class="core-login-onboarding-text">
                 {{ 'core.login.onboardingtoconnect' | translate }}
             </p>
-            <ion-button expand="block" (click)="skip($event)" class="ion-margin-bottom" color="light">
+            <ion-button expand="block" (click)="skip($event)" class="ion-margin-bottom" fill="outline">
                 {{ 'core.login.onboardingialreadyhaveasite' | translate }}
             </ion-button>
             <ion-button expand="block" (click)="next($event)" class="ion-margin-bottom">
diff --git a/src/core/features/login/pages/change-password/change-password.html b/src/core/features/login/pages/change-password/change-password.html
index 9d89d49e4..b36619a1b 100644
--- a/src/core/features/login/pages/change-password/change-password.html
+++ b/src/core/features/login/pages/change-password/change-password.html
@@ -43,7 +43,7 @@
                 <p>{{ 'core.login.changepasswordlogoutinstructions' | translate }}</p>
             </ion-label>
         </ion-item>
-        <ion-button class="ion-text-wrap ion-margin" expand="block" color="light" (click)="logout()">
+        <ion-button class="ion-text-wrap ion-margin" expand="block" fill="outline" (click)="logout()">
             {{ logoutLabel | translate }}
         </ion-button>
     </ion-list>
diff --git a/src/core/features/login/pages/credentials/credentials.html b/src/core/features/login/pages/credentials/credentials.html
index b9a85c9d3..2335e3cca 100644
--- a/src/core/features/login/pages/credentials/credentials.html
+++ b/src/core/features/login/pages/credentials/credentials.html
@@ -54,7 +54,7 @@
 
             <ng-container *ngIf="showScanQR">
                 <div class="ion-text-center ion-padding">{{ 'core.login.or' | translate }}</div>
-                <ion-button expand="block" color="light" class="ion-margin" (click)="showInstructionsAndScanQR()">
+                <ion-button expand="block" fill="outline" class="ion-margin" (click)="showInstructionsAndScanQR()">
                     <ion-icon slot="start" name="fas-qrcode" aria-hidden="true"></ion-icon>
                     {{ 'core.scanqr' | translate }}
                 </ion-button>
@@ -93,7 +93,7 @@
                     </p>
                 </ion-label>
             </ion-item>
-            <ion-button expand="block" class="ion-margin ion-text-wrap" color="light" (click)="openEmailSignup()">
+            <ion-button expand="block" class="ion-margin ion-text-wrap" fill="outline" (click)="openEmailSignup()">
                 {{ 'core.login.startsignup' | translate }}
             </ion-button>
         </ion-list>
diff --git a/src/core/features/login/pages/reconnect/reconnect.html b/src/core/features/login/pages/reconnect/reconnect.html
index 61bf8066f..73c657428 100644
--- a/src/core/features/login/pages/reconnect/reconnect.html
+++ b/src/core/features/login/pages/reconnect/reconnect.html
@@ -53,7 +53,7 @@
         <ion-grid class="ion-padding">
             <ion-row>
                 <ion-col>
-                    <ion-button expand="block" color="light" (click)="cancel($event)">
+                    <ion-button expand="block" fill="outline" (click)="cancel($event)">
                         {{ 'core.login.cancel' | translate }}
                     </ion-button>
                 </ion-col>
@@ -67,7 +67,7 @@
 
         <ng-container *ngIf="showScanQR">
             <div class="ion-text-center ion-padding">{{ 'core.login.or' | translate }}</div>
-            <ion-button expand="block" color="light" class="ion-margin" (click)="showInstructionsAndScanQR()">
+            <ion-button expand="block" fill="outline" class="ion-margin" (click)="showInstructionsAndScanQR()">
                 <ion-icon slot="start" name="fas-qrcode" aria-hidden="true"></ion-icon>
                 {{ 'core.scanqr' | translate }}
             </ion-button>
@@ -96,7 +96,7 @@
 
     <!-- If OAuth, display cancel button since the form isn't displayed. -->
     <ion-list *ngIf="isOAuth">
-        <ion-button expand="block" class="ion-margin" color="light" (click)="cancel($event)">
+        <ion-button expand="block" class="ion-margin" fill="outline" (click)="cancel($event)">
             {{ 'core.login.cancel' | translate }}
         </ion-button>
     </ion-list>
diff --git a/src/core/features/login/pages/site-policy/site-policy.html b/src/core/features/login/pages/site-policy/site-policy.html
index af2cd7267..dbef122e6 100644
--- a/src/core/features/login/pages/site-policy/site-policy.html
+++ b/src/core/features/login/pages/site-policy/site-policy.html
@@ -30,7 +30,7 @@
             <ion-button class="ion-text-wrap ion-margin-horizontal" expand="block" (click)="accept()">
                 {{ 'core.login.policyacceptmandatory' | translate }}
             </ion-button>
-            <ion-button class="ion-text-wrap ion-margin-horizontal ion-margin-bottom" expand="block" color="light" (click)="cancel()">
+            <ion-button class="ion-text-wrap ion-margin-horizontal ion-margin-bottom" expand="block" fill="outline" (click)="cancel()">
                 {{ 'core.login.cancel' | translate }}
             </ion-button>
         </ion-list>
diff --git a/src/core/features/login/pages/site/site.html b/src/core/features/login/pages/site/site.html
index 5adb6101f..70254c58a 100644
--- a/src/core/features/login/pages/site/site.html
+++ b/src/core/features/login/pages/site/site.html
@@ -101,7 +101,7 @@
 
     <ng-container *ngIf="showScanQR && !hasSites && !enteredSiteUrl">
         <div class="ion-text-center ion-padding ion-margin-top">{{ 'core.login.or' | translate }}</div>
-        <ion-button expand="block" color="light" class="ion-margin" (click)="showInstructionsAndScanQR()" aria-haspopup="dialog">
+        <ion-button expand="block" fill="outline" class="ion-margin" (click)="showInstructionsAndScanQR()" aria-haspopup="dialog">
             <ion-icon slot="start" name="fas-qrcode" aria-hidden="true"></ion-icon>
             {{ 'core.scanqr' | translate }}
         </ion-button>
diff --git a/src/core/features/question/components/question/core-question.html b/src/core/features/question/components/question/core-question.html
index fb523c3e3..994ba6a4d 100644
--- a/src/core/features/question/components/question/core-question.html
+++ b/src/core/features/question/components/question/core-question.html
@@ -19,7 +19,7 @@
 </ion-item>
 
 <!-- Question behaviour buttons. -->
-<ion-button *ngFor="let button of question?.behaviourButtons" class="ion-margin ion-text-wrap" expand="block"
+<ion-button *ngFor="let button of question?.behaviourButtons" class="ion-margin-vertical ion-text-wrap" expand="block"
     (click)="buttonClicked.emit(button)" [disabled]="button.disabled">
     {{ button.value }}
 </ion-button>
diff --git a/src/core/features/viewer/components/text/text.html b/src/core/features/viewer/components/text/text.html
index 851bf8f03..6dedd7b76 100644
--- a/src/core/features/viewer/components/text/text.html
+++ b/src/core/features/viewer/components/text/text.html
@@ -20,7 +20,7 @@
     </ion-card>
 </ion-content>
 <ion-footer *ngIf="displayCopyButton">
-    <ion-button expand="block" color="light" (click)="copyText()">
+    <ion-button expand="block" fill="outline" (click)="copyText()">
         <ion-icon name="fas-copy" aria-hidden="true" slot="start"></ion-icon>
         {{ 'core.copytoclipboard' | translate }}
     </ion-button>