diff --git a/templates/repo/actions/workflow_dispatch.tmpl b/templates/repo/actions/workflow_dispatch.tmpl
index acba9e828e3..5fb1012e2ee 100644
--- a/templates/repo/actions/workflow_dispatch.tmpl
+++ b/templates/repo/actions/workflow_dispatch.tmpl
@@ -26,12 +26,12 @@
 							<input name="search" type="text" placeholder="{{ctx.Locale.Tr "repo.filter_branch_and_tag"}}...">
 						</div>
 						<div class="branch-tag-tab">
-							<a class="branch-tag-item reference column muted active" href="#" data-target="#branch-list">
+							<button type="button" class="btn branch-tag-item reference column active" data-target="#branch-list">
 								{{svg "octicon-git-branch" 16 "tw-mr-1"}} {{ctx.Locale.Tr "repo.branches"}}
-							</a>
-							<a class="branch-tag-item reference column muted" href="#" data-target="#tag-list">
+							</button>
+							<button type="button" class="btn branch-tag-item reference column" data-target="#tag-list">
 								{{svg "octicon-tag" 16 "tw-mr-1"}} {{ctx.Locale.Tr "repo.tags"}}
-							</a>
+							</button>
 						</div>
 						<div class="branch-tag-divider"></div>
 						<div id="branch-list" class="scrolling menu reference-list-menu">
diff --git a/templates/repo/diff/compare.tmpl b/templates/repo/diff/compare.tmpl
index 9572715ac39..482c8a43460 100644
--- a/templates/repo/diff/compare.tmpl
+++ b/templates/repo/diff/compare.tmpl
@@ -40,16 +40,16 @@
 					<div class="header">
 						<div class="ui grid">
 							<div class="two column row">
-								<a class="reference column" href="#" data-target=".base-branch-list">
+								<button type="button" class="btn reference column" data-target=".base-branch-list">
 									<span class="tw-text-text">
 										{{svg "octicon-git-branch"}} {{ctx.Locale.Tr "repo.branches"}}
 									</span>
-								</a>
-								<a class="reference column" href="#" data-target=".base-tag-list">
+								</button>
+								<button type="button" class="btn reference column" data-target=".base-tag-list">
 									<span class="tw-text-text">
 										{{svg "octicon-tag"}} {{ctx.Locale.Tr "repo.tags"}}
 									</span>
-								</a>
+								</button>
 							</div>
 						</div>
 					</div>
@@ -111,16 +111,16 @@
 					<div class="header">
 						<div class="ui grid">
 							<div class="two column row">
-								<a class="reference column" href="#" data-target=".head-branch-list">
+								<button type="button" class="btn reference column" data-target=".head-branch-list">
 									<span class="tw-text-text">
 										{{svg "octicon-git-branch"}} {{ctx.Locale.Tr "repo.branches"}}
 									</span>
-								</a>
-								<a class="reference column" href="#" data-target=".head-tag-list">
+								</button>
+								<button type="button" class="btn reference column" data-target=".head-tag-list">
 									<span class="tw-text-text">
 										{{svg "octicon-tag"}} {{ctx.Locale.Tr "repo.tags"}}
 									</span>
-								</a>
+								</button>
 							</div>
 						</div>
 					</div>
diff --git a/templates/repo/issue/branch_selector_field.tmpl b/templates/repo/issue/branch_selector_field.tmpl
index 7d2dcfd9f70..96575d2c49e 100644
--- a/templates/repo/issue/branch_selector_field.tmpl
+++ b/templates/repo/issue/branch_selector_field.tmpl
@@ -30,17 +30,17 @@ Still needs to figure out:
 			<input name="search" placeholder="{{ctx.Locale.Tr "repo.filter_branch_and_tag"}}...">
 		</div>
 		<div class="branch-tag-tab">
-			<a class="branch-tag-item reference column muted active" href="#" data-target="#branch-list">
+			<button type="button" class="btn branch-tag-item reference column active" data-target="#branch-list">
 				{{svg "octicon-git-branch" 16 "tw-mr-1"}} {{ctx.Locale.Tr "repo.branches"}}
-			</a>
-			<a class="branch-tag-item reference column muted" href="#" data-target="#tag-list">
+			</button>
+			<button type="button" class="btn branch-tag-item reference column" data-target="#tag-list">
 				{{svg "octicon-tag" 16 "tw-mr-1"}} {{ctx.Locale.Tr "repo.tags"}}
-			</a>
+			</button>
 		</div>
 		<div class="branch-tag-divider"></div>
 		<div id="branch-list" class="scrolling menu reference-list-menu">
 			{{if or .Reference (not .Issue)}}
-				<div class="item tw-text-xs" data-id="" data-name="{{ctx.Locale.Tr "repo.issues.no_ref"}}" data-id-selector="#ref_selector"><strong><a href="#">{{ctx.Locale.Tr "repo.clear_ref"}}</a></strong></div>
+				<div class="item tw-text-xs" data-id="" data-name="{{ctx.Locale.Tr "repo.issues.no_ref"}}" data-id-selector="#ref_selector"><strong>{{ctx.Locale.Tr "repo.clear_ref"}}</strong></div>
 			{{end}}
 			{{range .Branches}}
 				<div class="item" data-id="refs/heads/{{.}}" data-name="{{.}}" data-id-selector="#ref_selector" title="{{.}}">{{.}}</div>
@@ -50,7 +50,7 @@ Still needs to figure out:
 		</div>
 		<div id="tag-list" class="scrolling menu reference-list-menu tw-hidden">
 			{{if or .Reference (not .Issue)}}
-				<div class="item tw-text-xs" data-id="" data-name="{{ctx.Locale.Tr "repo.issues.no_ref"}}" data-id-selector="#ref_selector"><strong><a href="#">{{ctx.Locale.Tr "repo.clear_ref"}}</a></strong></div>
+				<div class="item tw-text-xs" data-id="" data-name="{{ctx.Locale.Tr "repo.issues.no_ref"}}" data-id-selector="#ref_selector"><strong>{{ctx.Locale.Tr "repo.clear_ref"}}</strong></div>
 			{{end}}
 			{{range .Tags}}
 				<div class="item" data-id="refs/tags/{{.}}" data-name="tags/{{.}}" data-id-selector="#ref_selector">{{.}}</div>
diff --git a/web_src/js/components/RepoBranchTagSelector.vue b/web_src/js/components/RepoBranchTagSelector.vue
index 993b19779a8..d998175da11 100644
--- a/web_src/js/components/RepoBranchTagSelector.vue
+++ b/web_src/js/components/RepoBranchTagSelector.vue
@@ -233,12 +233,12 @@ async function loadTabItems() {
         <input name="search" ref="elSearchField" autocomplete="off" v-model="searchTerm" @keydown="keydown($event)" :placeholder="searchFieldPlaceholder">
       </div>
       <div v-if="showTabBranches" class="branch-tag-tab">
-        <a class="branch-tag-item muted" :class="{active: selectedTab === 'branches'}" href="#" @click="handleTabSwitch('branches')">
+        <button type="button" class="btn branch-tag-item" :class="{active: selectedTab === 'branches'}" @click="handleTabSwitch('branches')">
           <svg-icon name="octicon-git-branch" :size="16" class="tw-mr-1"/>{{ textBranches }}
-        </a>
-        <a v-if="showTabTags" class="branch-tag-item muted" :class="{active: selectedTab === 'tags'}" href="#" @click="handleTabSwitch('tags')">
+        </button>
+        <button v-if="showTabTags" type="button" class="btn branch-tag-item" :class="{active: selectedTab === 'tags'}" @click="handleTabSwitch('tags')">
           <svg-icon name="octicon-tag" :size="16" class="tw-mr-1"/>{{ textTags }}
-        </a>
+        </button>
       </div>
       <div class="branch-tag-divider"/>
       <div class="scrolling menu" ref="elScrollContainer">