diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index 23ee989e32..ee3406fac6 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -111,12 +111,12 @@
 				{{if eq $n 0}}
 					<div class="ui action tiny input" id="clone-panel">
 						{{if not $.DisableHTTP}}
-							<button class="ui basic clone button" id="repo-clone-https" data-link="{{.CloneLink.HTTPS}}">
+							<button class="ui basic clone button no-transition" id="repo-clone-https" data-link="{{.CloneLink.HTTPS}}">
 								{{if UseHTTPS}}HTTPS{{else}}HTTP{{end}}
 							</button>
 						{{end}}
 						{{if and (not $.DisableSSH) (or $.IsSigned $.ExposeAnonSSH)}}
-							<button class="ui basic clone button" id="repo-clone-ssh" data-link="{{.CloneLink.SSH}}">
+							<button class="ui basic clone button no-transition" id="repo-clone-ssh" data-link="{{.CloneLink.SSH}}">
 								SSH
 							</button>
 						{{end}}
@@ -125,6 +125,19 @@
 						{{else if and (not $.DisableSSH) (or $.IsSigned $.ExposeAnonSSH)}}
 							<input id="repo-clone-url" value="{{$.CloneLink.SSH}}" readonly>
 						{{end}}
+						<script defer>
+							const isSSH = localStorage.getItem('repo-clone-protocol') === 'ssh';
+							const sshButton = document.getElementById('repo-clone-ssh');
+							const httpsButton = document.getElementById('repo-clone-https');
+							const input = document.getElementById('repo-clone-url');
+							if (input) input.value = (isSSH ? sshButton : httpsButton).dataset.link;
+							if (sshButton) sshButton.classList[isSSH ? 'add' : 'remove']('primary');
+							if (httpsButton) httpsButton.classList[isSSH ? 'remove' : 'add']('primary');
+							setTimeout(() => {
+								if (sshButton) sshButton.classList.remove('no-transition');
+								if (httpsButto) httpsButton.classList.remove('no-transition');
+							}, 100);
+						</script>
 						{{if or (not $.DisableHTTP) (and (not $.DisableSSH) (or $.IsSigned $.ExposeAnonSSH))}}
 							<button class="ui basic icon button poping up clipboard" id="clipboard-btn" data-original="{{.i18n.Tr "repo.copy_link"}}" data-success="{{.i18n.Tr "repo.copy_link_success"}}" data-error="{{.i18n.Tr "repo.copy_link_error"}}" data-content="{{.i18n.Tr "repo.copy_link"}}" data-variation="inverted tiny" data-clipboard-target="#repo-clone-url">
 								{{svg "octicon-clippy"}}
diff --git a/web_src/js/index.js b/web_src/js/index.js
index fc49195607..85e1fb082c 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -1138,16 +1138,16 @@ async function initRepository() {
   $('#repo-clone-ssh').on('click', function () {
     $('.clone-url').text($(this).data('link'));
     $('#repo-clone-url').val($(this).data('link'));
-    $(this).addClass('blue');
-    $('#repo-clone-https').removeClass('blue');
+    $(this).addClass('primary');
+    $('#repo-clone-https').removeClass('primary');
     localStorage.setItem('repo-clone-protocol', 'ssh');
   });
   $('#repo-clone-https').on('click', function () {
     $('.clone-url').text($(this).data('link'));
     $('#repo-clone-url').val($(this).data('link'));
-    $(this).addClass('blue');
+    $(this).addClass('primary');
     if ($('#repo-clone-ssh').length > 0) {
-      $('#repo-clone-ssh').removeClass('blue');
+      $('#repo-clone-ssh').removeClass('primary');
       localStorage.setItem('repo-clone-protocol', 'https');
     }
   });
@@ -2520,22 +2520,6 @@ $(document).ready(async () => {
   initTableSort();
   initNotificationsTable();
 
-  // Repo clone url.
-  if ($('#repo-clone-url').length > 0) {
-    switch (localStorage.getItem('repo-clone-protocol')) {
-      case 'ssh':
-        if ($('#repo-clone-ssh').length > 0) {
-          $('#repo-clone-ssh').trigger('click');
-        } else {
-          $('#repo-clone-https').trigger('click');
-        }
-        break;
-      default:
-        $('#repo-clone-https').trigger('click');
-        break;
-    }
-  }
-
   const routes = {
     'div.user.settings': initUserSettings,
     'div.repository.settings.collaboration': initRepositoryCollaboration
diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less
index 60d50883c5..f5c5d710f2 100644
--- a/web_src/less/helpers.less
+++ b/web_src/less/helpers.less
@@ -24,6 +24,8 @@
 .rounded-left { border-radius: var(--border-radius) 0 0 var(--border-radius) !important; }
 .rounded-right { border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; }
 
+.no-transition { transition: none !important; }
+
 .bg-red { background: var(--color-red) !important; }
 .bg-orange { background: var(--color-orange) !important; }
 .bg-yellow { background: var(--color-yellow) !important; }