diff --git a/front/src/style/colors.scss b/front/src/style/colors.scss
index d0b54607c..86302fbc6 100644
--- a/front/src/style/colors.scss
+++ b/front/src/style/colors.scss
@@ -496,16 +496,16 @@
     border: 1px solid var(--background-color);
 
     &.interactive {
-      &[aria-pressed=true] {
-        color: var(--pressed-color, var(--active-color));
-        background-color: var(--pressed-background-color, var(--active-background-color));
-        border-color: var(--pressed-background-color, var(--active-background-color));
-      }
       &:hover {
         color:var(--hover-color);
         background-color:var(--hover-background-color);
         border-color: var(--hover-background-color);
       }
+      &[aria-pressed=true] {
+        color: var(--pressed-color, var(--active-color));
+        background-color: var(--pressed-background-color, var(--active-background-color));
+        border-color: var(--pressed-background-color, var(--active-background-color));
+      }
       &:is(:active, .active) {
         color:var(--active-color);
         background-color:var(--active-background-color);
@@ -525,15 +525,15 @@
     border: 1px solid transparent;
 
     &.interactive{
+      &:hover {
+        background-color: var(--hover-background-color);
+        border-color: var(--hover-background-color);
+      }
       &[aria-pressed=true] {
         color: var(--pressed-color, var(--active-color));
         background-color: var(--pressed-background-color, var(--active-background-color));
         border-color: var(--pressed-background-color, var(--active-background-color));
       }
-      &:hover {
-        background-color: var(--hover-background-color);
-        border-color: var(--hover-background-color);
-      }
       &:active {
         background-color: var(--active-background-color);
       }
@@ -559,14 +559,14 @@
     border: 1px solid var(--border-color);
 
     &.interactive{
+      &:hover{
+        border-color: var(--hover-background-color);
+      }
       &[aria-pressed=true] {
         color: var(--pressed-color, var(--active-color));
         background-color: var(--pressed-background-color, var(--active-background-color));
         border-color: var(--pressed-background-color, var(--active-background-color));
       }
-      &:hover{
-        border-color: var(--hover-background-color);
-      }
       &:is(:active, .active) {
         border-color: var(--active-background-color);
         &.router-link-exact-active {