diff --git a/config/eww/quick-settings/quick-settings.scss b/config/eww/quick-settings/quick-settings.scss
index 063af6b7..fd8d0fb5 100644
--- a/config/eww/quick-settings/quick-settings.scss
+++ b/config/eww/quick-settings/quick-settings.scss
@@ -22,6 +22,7 @@
   color: #CBA6F7;
   border-radius: 80px;
   border: 2px solid rgba(0,0,0,0);
+  transition: background-color 0.5s ease-in-out;
 }
 
 .quick-settings-logo:hover {
@@ -105,6 +106,7 @@
   border-left: 2px solid $contrastbg;
   border-top: 2px solid $contrastbg;
   border-bottom: 2px solid $contrastbg;
+  transition: all 0.5s ease-in-out;
 }
 
 .right-part {
@@ -114,6 +116,7 @@
   border-right: 2px solid $contrastbg;
   border-top: 2px solid $contrastbg;
   border-bottom: 2px solid $contrastbg;
+  transition: all 0.5s ease-in-out;
 }
 
 .right-part:hover {
@@ -175,6 +178,7 @@
       background: #3e4153;
       border-radius: 100%;
       box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
+      transition: background-color 0.5s ease-in-out;
     }
     slider:hover {
       background-color: #303240;
diff --git a/config/eww/traybuttons/traybuttons.scss b/config/eww/traybuttons/traybuttons.scss
index d24b11c3..84ef9f48 100644
--- a/config/eww/traybuttons/traybuttons.scss
+++ b/config/eww/traybuttons/traybuttons.scss
@@ -39,6 +39,7 @@
   color: #CBA6F7;
   border-radius: 80px;
   border: 2px solid #1b1b2b;
+  transition: background-color 0.5s ease-in-out;
 }
 
 .toggle-off:hover {
@@ -52,6 +53,7 @@
   color: #CBA6F7;
   border-radius: 80px;
   border: 2px solid $contrastbg;
+  transition: background-color 0.5s ease-in-out;
 }
 
 .toggle-on:hover {