diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less
index e0e26d3a8..8adaf3816 100755
--- a/src/definitions/elements/button.less
+++ b/src/definitions/elements/button.less
@@ -68,7 +68,7 @@
 .ui.button:hover {
   background-color: @hoverBackgroundColor;
   background-image: @hoverBackgroundImage;
-  color: @selectedTextColor;
+  color: @hoverColor;
 }
 
 .ui.button:hover .icon {
@@ -83,7 +83,7 @@
   background-color: @focusBackgroundColor;
   background-image: @focusBackgroundImage;
   box-shadow: @focusBoxShadow;
-  color: @selectedTextColor;
+  color: @focusColor;
 }
 
 .ui.button:focus .icon {
@@ -98,7 +98,7 @@
 .ui.active.button:active {
   background-color: @downBackgroundColor;
   background-image: @downBackgroundImage;
-  color: @selectedTextColor;
+  color: @downColor;
   box-shadow: @downBoxShadow;
 }
 
@@ -110,11 +110,12 @@
   background-color: @activeBackgroundColor;
   background-image: @activeBackgroundImage;
   box-shadow: @activeBoxShadow;
-  color: @textColor;
+  color: @activeColor;
 }
 .ui.button.active:hover {
-  background-color: @activeBackgroundColor;
-  background-image: @activeBackgroundImage;
+  background-color: @activeHoverBackgroundColor;
+  background-image: @activeHoverBackgroundImage;
+  color: @activeHoverColor;
 }
 .ui.button.active:active {
   background-color: @activeBackgroundColor;
@@ -1676,6 +1677,7 @@
 /*---------------
      Negative
 ----------------*/
+
 .ui.negative.buttons .button,
 .ui.negative.button {
   background-color: @negativeColor !important;
diff --git a/src/themes/packages/default/elements/button.variables b/src/themes/packages/default/elements/button.variables
index 9d7ce7d8e..db2f1f962 100755
--- a/src/themes/packages/default/elements/button.variables
+++ b/src/themes/packages/default/elements/button.variables
@@ -64,24 +64,51 @@
         States
 --------------------*/
 
+/* Hovered */
 @hoverBackgroundColor: '';
 @hoverBackgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.13));
 @hoverBoxShadow: '';
+@hoverColor: @selectedTextColor;
 @iconHoverOpacity: 0.85;
 
+/* Focused */
 @focusBackgroundColor: '';
 @focusBackgroundImage: '';
-@focusBoxShadow: 0 0 1px rgba(81, 167, 232, 0.8) inset, 0 0 3px 2px rgba(81, 167, 232, 0.8);
+@focusBoxShadow:
+  0px 0px 1px rgba(81, 167, 232, 0.8) inset,
+  0px 0px 3px 2px rgba(81, 167, 232, 0.8)
+;
+@focusColor: @selectedTextColor;
 @iconFocusOpacity: 0.85;
 
+/* Pressed Down */
 @downBackgroundColor: #F1F1F1;
 @downBackgroundImage: '';
-@downBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;
+@downBoxShadow:
+  0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset,
+  0px 1px 4px 0px rgba(0, 0, 0, 0.1) inset !important
+;
+@downColor: @selectedTextColor;
 
-@activeBackgroundColor: #DDDDDD;
+/* Active */
+@activeBackgroundColor: #DADADA;
 @activeBackgroundImage: none;
-@activeBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;
+@activeColor: rgba(0, 0, 0, 0.5);
+@activeBoxShadow:
+  0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset,
+  0px 1px 4px 0px rgba(0, 0, 0, 0.1) inset !important
+;
+
+/* Active + Hovered */
+@activeHoverBackgroundColor: #DADADA;
+@activeHoverBackgroundImage: none;
+@activeHoverBoxShadow:
+  0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset,
+  0px 1px 4px 0px rgba(0, 0, 0, 0.1) inset !important
+;
+@activeHoverColor: @selectedTextColor;
 
+/* Loading */
 @loadingBackgroundColor: #FFFFFF;
 
 /*-------------------