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 e4439b6e0..f14e1f7 100644
--- a/web/gui/src/main/webapp/app/fw/widget/button.css
+++ b/web/gui/src/main/webapp/app/fw/widget/button.css
@@ -18,8 +18,64 @@
  ONOS GUI -- Button Service -- CSS file
  */
 
-.btn svg.embeddedIcon,
-.tog svg.embeddedIcon,
-.rad svg.embeddedIcon {
+.light .tbarArrow svg.embeddedIcon .icon.tableColSortAsc .glyph {
+    fill: #838383;
+}
+.dark .tbarArrow svg.embeddedIcon .icon.tableColSortAsc .glyph {
+    fill: #B2B2B2;
+}
+
+.button,
+.toggleButton,
+.radioSet,
+.separator {
+    display: inline-block;
+}
+.button,
+.toggleButton {
+    padding: 0 4px 0 4px;
+}
+.radioSet .toggleButton {
+    padding: 0 0 0 4px;
+}
+
+.button svg.embeddedIcon,
+.toggleButton svg.embeddedIcon {
     cursor: pointer;
 }
+.button svg.embeddedIcon .icon rect,
+.toggleButton svg.embeddedIcon .icon rect {
+    stroke: none;
+}
+
+/* Selected button color */
+.light .button svg.embeddedIcon,
+.light .toggleButton.selected svg.embeddedIcon {
+    fill: #838383;
+}
+.light .button svg.embeddedIcon .glyph,
+.light .toggleButton.selected svg.embeddedIcon .glyph {
+    fill: white;
+}
+.dark .button svg.embeddedIcon,
+.dark .toggleButton.selected svg.embeddedIcon {
+    fill: #151515;
+}
+.dark .button svg.embeddedIcon .glyph,
+.dark .toggleButton.selected svg.embeddedIcon .glyph {
+    fill: #B2B2B2;
+}
+
+/* Unselected button color */
+.light .toggleButton svg.embeddedIcon {
+    fill: #eee;
+}
+.light .toggleButton svg.embeddedIcon .glyph {
+    fill: #bbb;
+}
+.dark .toggleButton svg.embeddedIcon {
+    fill: #303030;
+}
+.dark .toggleButton svg.embeddedIcon .glyph {
+    fill: #565656;
+}