diff --git a/web/gui/src/main/webapp/app/fw/widget/button.css b/web/gui/src/main/webapp/app/fw/widget/button.css
index 4bcaa85..9ae0359 100644
--- a/web/gui/src/main/webapp/app/fw/widget/button.css
+++ b/web/gui/src/main/webapp/app/fw/widget/button.css
@@ -41,21 +41,38 @@
 }
 
 /* Selected button color */
-.light .button svg.embeddedIcon,
-.light .toggleButton.selected svg.embeddedIcon,
-.light .radioButton.selected svg.embeddedIcon {
+.light .button svg.embeddedIcon .icon rect,
+.light .toggleButton.selected svg.embeddedIcon .icon rect,
+.light .radioButton.selected svg.embeddedIcon .icon rect {
     fill: #838383;
 }
+
+.light .button:hover svg.embeddedIcon .icon rect,
+.light .toggleButton.selected:hover svg.embeddedIcon .icon rect
+/* NOTE: selected radio button should NOT have hover highlight */
+{
+    fill: #444444;
+}
+
 .light .button svg.embeddedIcon .glyph,
 .light .toggleButton.selected svg.embeddedIcon .glyph,
 .light .radioButton.selected svg.embeddedIcon .glyph {
     fill: white;
 }
-.dark .button svg.embeddedIcon,
-.dark .toggleButton.selected svg.embeddedIcon,
-.dark .radioButton.selected svg.embeddedIcon{
+
+.dark .button svg.embeddedIcon .icon rect,
+.dark .toggleButton.selected svg.embeddedIcon .icon rect,
+.dark .radioButton.selected svg.embeddedIcon .icon rect {
     fill: #151515;
 }
+
+.dark .button:hover svg.embeddedIcon .icon rect,
+.dark .toggleButton.selected:hover svg.embeddedIcon .icon rect
+/* NOTE: selected radio button should NOT have hover highlight */
+{
+    fill: #444;
+}
+
 .dark .button svg.embeddedIcon .glyph,
 .dark .toggleButton.selected svg.embeddedIcon .glyph,
 .dark .radioButton.selected svg.embeddedIcon .glyph {
@@ -63,19 +80,41 @@
 }
 
 /* Unselected button color */
-.light .toggleButton svg.embeddedIcon,
-.light .radioButton svg.embeddedIcon {
+.light .toggleButton svg.embeddedIcon .icon rect,
+.light .radioButton svg.embeddedIcon .icon rect {
     fill: #eee;
 }
+
+.light .toggleButton:hover svg.embeddedIcon .icon rect,
+.light .radioButton:hover:not(.selected) svg.embeddedIcon .icon rect {
+    fill: #ccc;
+}
+
 .light .toggleButton svg.embeddedIcon .glyph,
 .light .radioButton svg.embeddedIcon .glyph {
     fill: #bbb;
 }
-.dark .toggleButton svg.embeddedIcon,
-.dark .radioButton svg.embeddedIcon {
+.light .toggleButton:hover:not(.selected) svg.embeddedIcon .glyph,
+.light .radioButton:hover:not(.selected) svg.embeddedIcon .glyph {
+    fill: #999;
+}
+
+.dark .toggleButton svg.embeddedIcon .icon rect,
+.dark .radioButton svg.embeddedIcon .icon rect {
     fill: #303030;
 }
+
+.dark .toggleButton:hover:not(.selected) svg.embeddedIcon .icon rect,
+.dark .radioButton:hover:not(.selected) svg.embeddedIcon .icon rect {
+    fill: #555;
+}
+
 .dark .toggleButton svg.embeddedIcon .glyph,
 .dark .radioButton svg.embeddedIcon .glyph {
     fill: #565656;
 }
+
+.dark .toggleButton:hover:not(.selected) svg.embeddedIcon .glyph,
+.dark .radioButton:hover:not(.selected) svg.embeddedIcon .glyph {
+    fill: #777;
+}