diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
index 6c29d9e33e8..ab7d00972c9 100644
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -54,6 +54,9 @@
 		<div class="ui buttons"><button type="button" class="ui button active">1</button><button type="button" class="ui button">2</button><button type="button" class="ui button">3</button></div>
 		<div class="ui buttons"><button type="button" class="ui button">1</button><button type="button" class="ui button active">2</button><button type="button" class="ui button">3</button></div>
 		<div class="ui buttons"><button type="button" class="ui button">1</button><button type="button" class="ui button">2</button><button type="button" class="ui button active">3</button></div>
+		<div class="ui primary buttons"><button type="button" class="ui button">1</button><button type="button" class="ui button">2</button><button type="button" class="ui button">3</button></div>
+		<div class="ui red buttons"><button type="button" class="ui button">1</button><button type="button" class="ui button">2</button><button type="button" class="ui button">3</button></div>
+		<div class="ui green buttons"><button type="button" class="ui button">1</button><button type="button" class="ui button">2</button><button type="button" class="ui button">3</button></div>
 	</div>
 
 	<div>
diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css
index 4efbe538e18..7802d343bd9 100644
--- a/web_src/css/modules/button.css
+++ b/web_src/css/modules/button.css
@@ -245,16 +245,19 @@
   border-color: var(--color-red-dark-2);
 }
 
-.ui.green.button {
+.ui.green.button,
+.ui.green.buttons .button {
   color: var(--color-white);
   background: var(--color-green);
 }
 
-.ui.green.button:hover {
+.ui.green.button:hover,
+.ui.green.buttons .button:hover {
   background: var(--color-green-dark-1);
 }
 
-.ui.green.button:active {
+.ui.green.button:active,
+.ui.green.buttons .button:active {
   background: var(--color-green-dark-2);
 }
 
@@ -337,6 +340,14 @@ It needs some tricks to tweak the left/right borders with active state */
   border-left: 1px solid var(--color-secondary-dark-2);
 }
 
+.ui:is(.primary, .red, .green).buttons .button:hover {
+  border-color: transparent; /* let the colored hover background fill the border */
+}
+
+.ui:is(.primary, .red, .green).buttons .button:hover + .button {
+  border-left-color: transparent;
+}
+
 /* TODO: these "tw-hidden" selectors are only used by "blame.tmpl" buttons: Raw/Normal View/History/Unescape, need to be refactored to a clear solution later */
 .ui.buttons .button:first-child,
 .ui.buttons .button.tw-hidden:first-child + .button {