Fixing button transitions.

dist/ratchet.css

@@ -614,17 +614,17 @@ select {
   background-color: transparent;
   border: 1px solid #929292;
   border-radius: 4px;
-}
-[class*="button"]:active, [class*="button"].active, [class*="button"].button-filled {
-  color: #fff;
-  background-color: #929292;
-  -webkit-transition: background-color, opacity;
-  transition: background-color, opacity;
+  -webkit-transition: background-color, opacity, color;
+  transition: background-color, opacity, color;
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s;
   -webkit-transition-timing-function: linear;
   transition-timing-function: linear;
 }
+[class*="button"]:active, [class*="button"].active, [class*="button"].button-filled {
+  color: #fff;
+  background-color: #929292;
+}
 [class*="button"]:disabled, [class*="button"].disabled, [class*="button"].button-filled:active {
   opacity: .6;
 }

lib/sass/buttons.scss

@@ -17,6 +17,9 @@
   background-color: transparent;
   border: 1px solid $default-color;
   border-radius: 4px;
+  @include transition(background-color, opacity, color);
+  @include transition-duration(.2s);
+  @include transition-timing-function(linear);
 
   // Active & filled button styles
   &:active,
@@ -24,9 +27,6 @@
   &.button-filled {
     color: #fff;
     background-color: $default-color;
-    @include transition(background-color, opacity);
-    @include transition-duration(.2s);
-    @include transition-timing-function(linear);
   }
 
   // Disabled styles & filled button active styles