diff --git a/src/components/ButtonAddCompoent.vue b/src/components/ButtonAddCompoent.vue
index 8ae42a91..cc13f408 100644
--- a/src/components/ButtonAddCompoent.vue
+++ b/src/components/ButtonAddCompoent.vue
@@ -19,10 +19,12 @@
 <style scoped>
 .color-btn {
   color: white;
-  background: hsla(var(--blue-10-hsl) / 0.7);
+  background: hsla(var(--blue-10-hsl) / 0.5);
+  transition: background 0.3s ease-in-out;
 }
 
-:deep(.q-hoverable:hover) {
+:deep(:where(.q-hoverable:hover, .q-fab--opened)) {
+  transition: background 0.3s ease-in-out;
   background: hsla(var(--blue-10-hsl) / 1) !important;
 }
 </style>