Adding colours and hover:active to buttons

index.html

@@ -215,6 +215,21 @@
   </div>
 &lt;/div&gt;</pre>
       </div>
+      <h4>Colors</h4>
+      <input type="button" class="paper-btn btn-primary" value="Primary"/>
+      <input type="button" class="btn-secondary" value="Secondary"/>
+      <button class="btn-success">Success</button>
+      <button class="btn-warning">Warning</button>
+      <button class="btn-danger">Danger</button>
+      <div class="docs">
+          <pre>
+  &lt;input type="button" class="paper-btn btn-primary" value="Primary"/&gt;
+  &lt;input type="button" class="btn-secondary" value="Secondary"/&gt;
+  &lt;button class="btn-success"&gt;Success&lt;/button&gt;
+  &lt;button class="btn-warning"&gt;Warning&lt;/button&gt;
+  &lt;button class="btn-danger"&gt;Danger&lt;/button&gt;
+          </pre>
+        </div>
     </div>
     <div class="section">
       <h2>Forms</h2>

src/buttons.less

@@ -1,15 +1,16 @@
-button, .paper-btn {
+button, .paper-btn, [type="button"] {
+    .shadow;
     align-self:center;
     background:transparent;
-    transition:all .5s ease;
+    transition:background-color .1s ease;
     color: @primary;
+    display: inline;
     outline:none;
     border:solid 2px @primary;
     .border;
     font-size: 1rem;
     padding: .75rem .75rem;
     cursor: pointer;
-    .shadow;
     &.btn-large {
         .shadow-large;
         font-size:2rem;
@@ -43,4 +44,20 @@ a {
         text-decoration: none;
         color: @primary;
     }
-}
+}
+
+.make-button-color-classes(@i: length(@colors)) when (@i > 0) {
+    .make-button-color-classes(@i - 1);
+    @color: extract(@colors, @i);
+    button.btn-@{color}, .paper-btn.btn-@{color}, [type="button"].btn-@{color} {
+        border-color: @@color;
+        background-color: ~"@{@{color}-light}";
+        color: ~"@{@{color}-text}";
+        &:hover:active{
+            @darkcolour: ~"@{color}-light";
+            background-color: darken(@@darkcolour, 10%);
+        }
+    }
+}
+
+.make-button-color-classes();

src/colors.less

@@ -11,6 +11,12 @@
 @warning-light: lighten(@warning, 30%);
 @danger-light: lighten(@danger, 45%);
 
+@primary-text: #FFF;
+@secondary-text: @primary;
+@success-text: @primary;
+@warning-text: @primary;
+@danger-text: @primary;
+
 @colors: primary, secondary, success, warning, danger;
 
 .make-text-color-classes(@i: length(@colors)) when (@i > 0) {