diff --git a/src/components/NcButton/NcButton.vue b/src/components/NcButton/NcButton.vue
index 7104b7b6f5..58d8898a54 100644
--- a/src/components/NcButton/NcButton.vue
+++ b/src/components/NcButton/NcButton.vue
@@ -412,8 +412,8 @@ export default {
 	}
 
 	// Default button type
-	background-color: var(--color-primary-element-lighter), var(--color-primary-element-light);
 	color: var(--color-primary-light-text);
+	background-color: var(--color-primary-light);
 	&:hover:not(:disabled) {
 		background-color: var(--color-primary-light-hover);
 	}
@@ -421,7 +421,7 @@ export default {
 	// Back to the default color for this button when active
 	// TODO: add ripple effect
 	&:active {
-		background-color: var(--color-primary-element-lighter), var(--color-primary-element-light);
+		background-color: var(--color-primary-element-light);
 	}
 
 	&__wrapper {