diff --git a/resources/style.css b/resources/style.css
index ad657363..b9d3aa5e 100644
--- a/resources/style.css
+++ b/resources/style.css
@@ -36,7 +36,6 @@ window#waybar.chromium {
     border: none;
 }
 
-/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
 #workspaces button {
     padding: 0 5px;
     background-color: transparent;
@@ -44,6 +43,13 @@ window#waybar.chromium {
     border-bottom: 3px solid transparent;
 }
 
+/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
+#workspaces button:hover {
+    background: rgba(0, 0, 0, 0.2);
+    box-shadow: inherit;
+    border-bottom: 3px solid #ffffff;
+}
+
 #workspaces button.focused {
     background-color: #64727D;
     border-bottom: 3px solid #ffffff;