diff --git a/src/app/community-list-page/community-list/community-list.component.html b/src/app/community-list-page/community-list/community-list.component.html
index 821cb58473..896c11b291 100644
--- a/src/app/community-list-page/community-list/community-list.component.html
+++ b/src/app/community-list-page/community-list/community-list.component.html
@@ -8,10 +8,10 @@
         <span class="fa fa-chevron-right invisible" aria-hidden="true"></span>
       </button>
       <div class="align-middle pt-2">
-        <a *ngIf="node!==loadingNode" [routerLink]="[]" (click)="getNextPage(node)"
+        <button *ngIf="node!==loadingNode" (click)="getNextPage(node)"
            class="btn btn-outline-primary btn-sm" role="button">
            <i class="fas fa-angle-down"></i> {{ 'communityList.showMore' | translate }}
-        </a>
+        </button>
         <ds-themed-loading *ngIf="node===loadingNode && dataSource.loading$ | async" class="ds-themed-loading"></ds-themed-loading>
       </div>
     </div>
diff --git a/src/app/community-list-page/community-list/community-list.component.spec.ts b/src/app/community-list-page/community-list/community-list.component.spec.ts
index 575edf14e8..2120df62fa 100644
--- a/src/app/community-list-page/community-list/community-list.component.spec.ts
+++ b/src/app/community-list-page/community-list/community-list.component.spec.ts
@@ -16,6 +16,7 @@ import { of as observableOf } from 'rxjs';
 import { By } from '@angular/platform-browser';
 import { isEmpty, isNotEmpty } from '../../shared/empty.util';
 import { FlatNode } from '../flat-node.model';
+import { RouterLinkWithHref } from '@angular/router';
 
 describe('CommunityListComponent', () => {
   let component: CommunityListComponent;
@@ -194,7 +195,7 @@ describe('CommunityListComponent', () => {
         }),
         CdkTreeModule,
         RouterTestingModule],
-      declarations: [CommunityListComponent],
+      declarations: [CommunityListComponent, RouterLinkWithHref],
       providers: [CommunityListComponent,
         { provide: CommunityListService, useValue: communityListServiceStub },],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -230,9 +231,14 @@ describe('CommunityListComponent', () => {
     expect(showMoreEl).toBeTruthy();
   });
 
+  it('should not render the show more button as an empty link', () => {
+    const debugElements = fixture.debugElement.queryAll(By.directive(RouterLinkWithHref));
+    expect(debugElements).toBeTruthy();
+  });
+
   describe('when show more of top communities is clicked', () => {
     beforeEach(fakeAsync(() => {
-      const showMoreLink = fixture.debugElement.query(By.css('.show-more-node a'));
+      const showMoreLink = fixture.debugElement.query(By.css('.show-more-node .btn-outline-primary'));
       showMoreLink.triggerEventHandler('click', {
         preventDefault: () => {/**/
         }
@@ -240,6 +246,7 @@ describe('CommunityListComponent', () => {
       tick();
       fixture.detectChanges();
     }));
+
     it('tree contains maximum of currentPage (2) * (2) elementsPerPage of first top communities, or less if there are less communities (3)', () => {
       const expandableNodesFound = fixture.debugElement.queryAll(By.css('.expandable-node a'));
       const childlessNodesFound = fixture.debugElement.queryAll(By.css('.childless-node a'));
diff --git a/src/app/item-page/simple/field-components/file-section/file-section.component.html b/src/app/item-page/simple/field-components/file-section/file-section.component.html
index 9d61b0a0e0..27cebd9338 100644
--- a/src/app/item-page/simple/field-components/file-section/file-section.component.html
+++ b/src/app/item-page/simple/field-components/file-section/file-section.component.html
@@ -8,10 +8,10 @@
       </ds-file-download-link>
       <ds-themed-loading *ngIf="isLoading" message="{{'loading.default' | translate}}" [showMessage]="false"></ds-themed-loading>
       <div *ngIf="!isLastPage" class="mt-1" id="view-more">
-        <a class="bitstream-view-more btn btn-outline-secondary btn-sm" [routerLink]="[]" (click)="getNextPage()">{{'item.page.bitstreams.view-more' | translate}}</a>
+        <button class="bitstream-view-more btn btn-outline-secondary btn-sm" (click)="getNextPage()">{{'item.page.bitstreams.view-more' | translate}}</button>
       </div>
       <div *ngIf="isLastPage && currentPage != 1" class="mt-1" id="collapse">
-        <a class="bitstream-collapse btn btn-outline-secondary btn-sm" [routerLink]="[]" (click)="currentPage = undefined; getNextPage();">{{'item.page.bitstreams.collapse' | translate}}</a>
+        <button class="bitstream-collapse btn btn-outline-secondary btn-sm" (click)="currentPage = undefined; getNextPage();">{{'item.page.bitstreams.collapse' | translate}}</button>
       </div>
     </div>
   </ds-metadata-field-wrapper>
diff --git a/src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.html b/src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.html
index 65660eaa34..efbe9206d1 100644
--- a/src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.html
+++ b/src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.html
@@ -7,12 +7,12 @@
       <ds-themed-loading *ngIf="(i + 1) === objects.length && (i > 0) && (!representations || representations?.length === 0)" message="{{'loading.default' | translate}}"></ds-themed-loading>
       <div class="d-inline-block w-100 mt-2" *ngIf="(i + 1) === objects.length && representations?.length > 0">
         <div *ngIf="(objects.length * incrementBy) < total" class="float-left">
-          <a [routerLink]="[]" (click)="increase()">{{'item.page.related-items.view-more' |
-            translate:{ amount: (total - (objects.length * incrementBy) < incrementBy) ? total - (objects.length * incrementBy) : incrementBy } }}</a>
+          <button class="btn btn-link btn-link-inline" (click)="increase()">{{'item.page.related-items.view-more' |
+            translate:{ amount: (total - (objects.length * incrementBy) < incrementBy) ? total - (objects.length * incrementBy) : incrementBy } }}</button>
         </div>
         <div *ngIf="objects.length > 1" class="float-right">
-          <a [routerLink]="[]" (click)="decrease()">{{'item.page.related-items.view-less' |
-            translate:{ amount: representations?.length } }}</a>
+          <button class="btn btn-link btn-link-inline" (click)="decrease()">{{'item.page.related-items.view-less' |
+            translate:{ amount: representations?.length } }}</button>
         </div>
       </div>
     </ng-container>
diff --git a/src/app/item-page/simple/related-items/related-items.component.html b/src/app/item-page/simple/related-items/related-items.component.html
index 0d1e14941d..bee1f345fd 100644
--- a/src/app/item-page/simple/related-items/related-items.component.html
+++ b/src/app/item-page/simple/related-items/related-items.component.html
@@ -7,12 +7,12 @@
       <ds-themed-loading *ngIf="(i + 1) === objects.length && (itemsRD || i > 0) && !(itemsRD?.hasSucceeded && itemsRD?.payload && itemsRD?.payload?.page?.length > 0)" message="{{'loading.default' | translate}}"></ds-themed-loading>
       <div class="d-inline-block w-100 mt-2" *ngIf="(i + 1) === objects.length && itemsRD?.payload?.page?.length > 0">
         <div *ngIf="itemsRD?.payload?.totalPages > objects.length" class="float-left" id="view-more">
-          <a [routerLink]="[]" (click)="increase()">{{'item.page.related-items.view-more' |
-            translate:{ amount: (itemsRD?.payload?.totalElements - (incrementBy * objects.length) < incrementBy) ? itemsRD?.payload?.totalElements - (incrementBy * objects.length) : incrementBy } }}</a>
+          <button class="btn btn-link btn-link-inline" (click)="increase()">{{'item.page.related-items.view-more' |
+            translate:{ amount: (itemsRD?.payload?.totalElements - (incrementBy * objects.length) < incrementBy) ? itemsRD?.payload?.totalElements - (incrementBy * objects.length) : incrementBy } }}</button>
         </div>
         <div *ngIf="objects.length > 1" class="float-right" id="view-less">
-          <a [routerLink]="[]" (click)="decrease()">{{'item.page.related-items.view-less' |
-            translate:{ amount: itemsRD?.payload?.page?.length } }}</a>
+          <button class="btn btn-link btn-link-inline" (click)="decrease()">{{'item.page.related-items.view-less' |
+            translate:{ amount: itemsRD?.payload?.page?.length } }}</button>
         </div>
       </div>
     </ng-container>
diff --git a/src/app/search-navbar/search-navbar.component.html b/src/app/search-navbar/search-navbar.component.html
index e1de59ce51..d11364d62f 100644
--- a/src/app/search-navbar/search-navbar.component.html
+++ b/src/app/search-navbar/search-navbar.component.html
@@ -4,9 +4,9 @@
       <input #searchInput [@toggleAnimation]="isExpanded" [attr.aria-label]="('nav.search' | translate)" name="query"
              formControlName="query" type="text" placeholder="{{searchExpanded ? ('nav.search' | translate) : ''}}"
              class="d-inline-block bg-transparent position-absolute form-control dropdown-menu-right p-1" [attr.data-test]="'header-search-box' | dsBrowserOnly">
-      <a class="submit-icon" [routerLink]="" (click)="searchExpanded ? onSubmit(searchForm.value) : expand()" [attr.data-test]="'header-search-icon' | dsBrowserOnly">
+      <button class="submit-icon btn btn-link ds-btn-link" type="button" (click)="searchExpanded ? onSubmit(searchForm.value) : expand()" [attr.data-test]="'header-search-icon' | dsBrowserOnly">
         <em class="fas fa-search fa-lg fa-fw"></em>
-      </a>
+      </button>
     </form>
   </div>
 </div>
diff --git a/src/app/search-navbar/search-navbar.component.scss b/src/app/search-navbar/search-navbar.component.scss
index c1ccd289b2..d5bef9bc47 100644
--- a/src/app/search-navbar/search-navbar.component.scss
+++ b/src/app/search-navbar/search-navbar.component.scss
@@ -10,7 +10,7 @@ input[type="text"] {
   }
 }
 
-a.submit-icon {
+.submit-icon {
   cursor: pointer;
   position: sticky;
   top: 0;
diff --git a/src/styles/_global-styles.scss b/src/styles/_global-styles.scss
index 930384cf64..b030928815 100644
--- a/src/styles/_global-styles.scss
+++ b/src/styles/_global-styles.scss
@@ -1,206 +1,222 @@
 html {
-  position: relative;
-  min-height: 100%;
+    position: relative;
+    min-height: 100%;
 }
 
 body {
-  overflow-x: hidden;
+    overflow-x: hidden;
 }
 
 // Sticky Footer
 .outer-wrapper {
-  display: flex;
-  margin: 0;
+    display: flex;
+    margin: 0;
 }
 
 .inner-wrapper {
-  flex: 1 1 auto;
-  flex-flow: column nowrap;
-  display: flex;
-  min-height: 100vh;
-  flex-direction: column;
-  width: 100%;
-  position: relative;
+    flex: 1 1 auto;
+    flex-flow: column nowrap;
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
+    width: 100%;
+    position: relative;
 }
 
 .main-content {
-  z-index: var(--ds-main-z-index);
-  flex: 1 1 100%;
-  margin-top: var(--ds-content-spacing);
-  margin-bottom: var(--ds-content-spacing);
+    z-index: var(--ds-main-z-index);
+    flex: 1 1 100%;
+    margin-top: var(--ds-content-spacing);
+    margin-bottom: var(--ds-content-spacing);
 }
 
 .alert.hide {
-  padding: 0;
-  margin: 0;
+    padding: 0;
+    margin: 0;
 }
 
 ds-admin-sidebar {
-  position: fixed;
-  z-index: var(--ds-sidebar-z-index);
+    position: fixed;
+    z-index: var(--ds-sidebar-z-index);
 }
 
 .sticky-top {
-  z-index: 0;
+    z-index: 0;
 }
 
 .media-viewer
-  .change-gallery
-  .ngx-gallery
-  ngx-gallery-preview.ngx-gallery-active {
-  right: 0;
-  left: auto;
-  width: calc(100% - 53px);
+.change-gallery
+.ngx-gallery
+ngx-gallery-preview.ngx-gallery-active {
+    right: 0;
+    left: auto;
+    width: calc(100% - 53px);
 }
 
 .ds-submission-reorder-dragging {
-  .ds-hint,
-  button {
-    display: none;
-  }
+    .ds-hint,
+    button {
+        display: none;
+    }
 }
 
 ngb-modal-backdrop {
-  // ng-bootsrap animates opacity, causing the fully opaque background to flash briefly before the transition starts
-  // animating background-color between transparent & a RGBA color instead looks smoother
-  &.fade {
-    opacity: 1 !important;
-    background-color: transparent;
-    transition: background-color 0.15s linear;
+    // ng-bootsrap animates opacity, causing the fully opaque background to flash briefly before the transition starts
+    // animating background-color between transparent & a RGBA color instead looks smoother
+    &.fade {
+        opacity: 1 !important;
+        background-color: transparent;
+        transition: background-color 0.15s linear;
 
-    &.show {
-      background-color: rgba(0, 0, 0, 0.5);
+        &.show {
+            background-color: rgba(0, 0, 0, 0.5);
+        }
     }
-  }
 }
 
 .dont-break-out {
-  /* These are technically the same, but use both */
-  overflow-wrap: break-word;
-  word-wrap: break-word;
+    /* These are technically the same, but use both */
+    overflow-wrap: break-word;
+    word-wrap: break-word;
 
-  -ms-word-break: break-all;
-  /* This is the dangerous one in WebKit, as it breaks things wherever */
-  word-break: break-all;
-  /* Instead use this non-standard one: */
-  word-break: break-word;
+    -ms-word-break: break-all;
+    /* This is the dangerous one in WebKit, as it breaks things wherever */
+    word-break: break-all;
+    /* Instead use this non-standard one: */
+    word-break: break-word;
 
-  /* Adds a hyphen where the word breaks, if supported (No Blink) */
-  -ms-hyphens: auto;
-  -moz-hyphens: auto;
-  -webkit-hyphens: auto;
-  hyphens: auto;
+    /* Adds a hyphen where the word breaks, if supported (No Blink) */
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+    hyphens: auto;
 
 }
 
-.researcher-profile-switch button:focus{
-  outline: none !important;
+.researcher-profile-switch button:focus {
+    outline: none !important;
 }
-.researcher-profile-switch .switch.checked{
-  color: #fff;
+
+.researcher-profile-switch .switch.checked {
+    color: #fff;
 }
 
 /* Replicate default spacing look ~ preserveWhitespace=true
    To be used e.g. on a div containing buttons that should have a bit of spacing in between
  */
 .space-children-mr > :not(:last-child) {
-  margin-right: var(--ds-gap);
+    margin-right: var(--ds-gap);
 }
 
 /* Complement .space-children-mr when spaced elements are not on the same level */
 .mr-gap {
-  margin-right: var(--ds-gap);
+    margin-right: var(--ds-gap);
 }
 
 .ml-gap {
-  margin-left: var(--ds-gap);
+    margin-left: var(--ds-gap);
 }
 
 .custom-accordion .card-header button {
-  -webkit-box-shadow: none!important;
-  box-shadow: none!important;
-  width: 100%;
+    -webkit-box-shadow: none !important;
+    box-shadow: none !important;
+    width: 100%;
 }
+
 .custom-accordion .card:first-of-type {
-  border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color) !important;
-  border-bottom-left-radius: var(--bs-card-border-radius) !important;
-  border-bottom-right-radius: var(--bs-card-border-radius) !important;
+    border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color) !important;
+    border-bottom-left-radius: var(--bs-card-border-radius) !important;
+    border-bottom-right-radius: var(--bs-card-border-radius) !important;
 }
 
 ds-dynamic-form-control-container.d-none {
-  /* Ensures that form-control containers hidden and disabled by type binding collapse and let other fields in
-     the same row expand accordingly
-   */
-  visibility: collapse;
+    /* Ensures that form-control containers hidden and disabled by type binding collapse and let other fields in
+       the same row expand accordingly
+     */
+    visibility: collapse;
 }
 
 /* Used for dso administrative functionality */
 .btn-dark {
-  background-color: var(--ds-admin-sidebar-bg);
+    background-color: var(--ds-admin-sidebar-bg);
 }
 
 .preserve-line-breaks {
-  white-space: pre-line;
+    white-space: pre-line;
 }
 
 /* Thumbnail styles */
 .hide-placeholder-text {
-  .thumbnail-placeholder {
-    color: transparent !important;
-  }
+    .thumbnail-placeholder {
+        color: transparent !important;
+    }
 }
 
 /* Used to hide the thumbnail column in modals. */
 .hide-modal-thumbnail-column {
-  .modal-body ds-listable-object-component-loader div.row > div:first-child {
-    display: none;
-  }
-  .modal-body ds-listable-object-component-loader div.row > div:nth-child(2) {
-    flex: 0 0 100%;
-    max-width: 100%;
-  }
+    .modal-body ds-listable-object-component-loader div.row > div:first-child {
+        display: none;
+    }
+
+    .modal-body ds-listable-object-component-loader div.row > div:nth-child(2) {
+        flex: 0 0 100%;
+        max-width: 100%;
+    }
 }
 
 /* The font sizes used in "no thumbnail" placeholder */
 .thumb-font-0 {
-  .thumbnail-placeholder {
-    @media screen and (max-width: map-get($grid-breakpoints, lg)) {
-      font-size: 0.7rem;
-      padding: 0.2rem;
+    .thumbnail-placeholder {
+        @media screen and (max-width: map-get($grid-breakpoints, lg)) {
+            font-size: 0.7rem;
+            padding: 0.2rem;
+        }
+        @media screen and (max-width: map-get($grid-breakpoints, sm)) {
+            font-size: 0.6rem;
+            padding: 0.1rem;
+        }
+        font-size: 0.4rem;
+        padding: 0.1rem;
     }
-    @media screen and (max-width: map-get($grid-breakpoints, sm)) {
-      font-size: 0.6rem;
-      padding: 0.1rem;
-    }
-    font-size: 0.4rem;
-    padding: 0.1rem;
-  }
 }
+
 .thumb-font-1 {
-  .thumbnail-placeholder {
-    @media screen and (max-width: map-get($grid-breakpoints, sm)) {
-      font-size: 0.9rem;
-      padding: 0.1rem;
+    .thumbnail-placeholder {
+        @media screen and (max-width: map-get($grid-breakpoints, sm)) {
+            font-size: 0.9rem;
+            padding: 0.1rem;
+        }
+        @media screen and (max-width: 950px) {
+            font-size: 0.4rem;
+            padding: 0.1rem;
+        }
+        font-size: 0.5rem;
+        padding: 0.125rem;
     }
-    @media screen and (max-width: 950px) {
-      font-size: 0.4rem;
-      padding: 0.1rem;
-    }
-    font-size: 0.5rem;
-    padding: 0.125rem;
-  }
 }
+
 .thumb-font-2 {
-  .thumbnail-placeholder {
-    font-size: 0.9rem;
-    padding: 0.125rem;
-  }
+    .thumbnail-placeholder {
+        font-size: 0.9rem;
+        padding: 0.125rem;
+    }
 }
+
 .thumb-font-3 {
-  .thumbnail-placeholder {
-    font-size: 1.25rem;
-    padding: 0.5rem;
-  }
+    .thumbnail-placeholder {
+        font-size: 1.25rem;
+        padding: 0.5rem;
+    }
 }
 
+.btn.btn-link.btn-link-inline {
+    display: inline;
+    padding: 0;
 
+    &:not(:disabled){
+        &:hover, &:focus {
+            box-shadow: none;
+        }
+    }
+
+}