Adds warning color classes to buttons

Author: marcsoler

scss/components/_button.scss

@@ -284,3 +284,28 @@ table.button.alert:hover {
     }
   }
 }
+
+table.button.warning {
+  table {
+    td {
+      background: $warning-color;
+      border: 2px solid $warning-color;
+    }
+
+    a {
+      border: 0px solid $warning-color;
+    }
+  }
+}
+
+table.button.warning:hover {
+  table {
+    td {
+      background: darken($warning-color, 10%);
+    }
+
+    a {
+      border: 0px solid darken($warning-color, 10%);
+    }
+  }
+}

test/visual/pages/button-inky.html

@@ -39,6 +39,11 @@
       <button class="alert" href="http://zurb.com">I alert</button>
     </columns>
   </row>
+  <row>
+    <columns small="12" large="12">
+      <button class="warning" href="http://zurb.com">I warn</button>
+    </columns>
+  </row>
   <row>
     <columns small="12" large="12">
       <button href="http://zurb.com" href="http://zurb.com" class="expand">I expand</button>

test/visual/pages/button.html

@@ -210,6 +210,28 @@
       </tr>
     </table>
 
+    <table class="row">
+      <tr>
+        <th class="small-12 large-12 columns">
+
+          <table class="button warning">
+            <tr>
+              <td>
+                <table>
+                  <tr>
+                    <td>
+                      <a href="https://zurb.com">I warn</a>
+                    </td>
+                  </tr>
+                </table>
+              </td>
+            </tr>
+          </table>
+
+        </th>
+      </tr>
+    </table>
+
     <table class="row">
       <tr>
         <td class="small-12 large-12 columns">