Fix: button hover

Author: fsbraun

djangocms_frontend/static/djangocms_frontend/css/base.css

@@ -14,28 +14,6 @@
     --bs-warning: #ffc107;
     --bs-info: #0dcaf0;
 
-    .btn {
-        border-color: var(--bs-secondary);
-        box-shadow: none;
-        transition: all 0.15s ease-in-out;
-
-        &:hover {
-            color: var(--bs-white);
-            filter: saturate(60%);
-        }
-
-        &:focus,
-        &.focus {
-            filter: saturate(80%);
-            text-decoration: none;
-        }
-    }
-
-    .btn {
-        padding: 0.375rem 0.75rem;
-        border-radius: 4px;
-    }
-
     .btn-primary {
         color: white;
         background-color: var(--bs-primary)

djangocms_frontend/static/djangocms_frontend/css/button_group.css

@@ -11,10 +11,26 @@
     .btn {
         box-sizing: border-box;
         cursor: pointer;
-        -webkit-appearance: none;
         margin: 2px;
+        padding: 0.375rem 0.75rem;
+        border-radius: 4px;
         overflow: hidden;
         text-overflow: ellipsis;
+        white-space: nowrap;
+
+        border-color: var(--bs-secondary);
+        box-shadow: none;
+        transition: all 0.15s ease-in-out;
+
+        &:hover {
+            filter: opacity(0.8);
+        }
+
+        &:focus,
+        &.focus {
+            filter: opacity(0.85);
+            text-decoration: none;
+        }
     }
 
     // adds basic active effect

private/sass/components/_bs-buttons.scss

@@ -31,6 +31,7 @@ form ul.djangocms-frontend.nav {
     .nav-link {
         position: relative;
         text-decoration: none;
+        color: $black;
 
         span.indicator {
             display: none;