Add alternate button colors from HPSTR theme

- Fixes #40

_posts/2011-03-10-sample-post.md

@@ -95,8 +95,15 @@ HTML and CSS are our tools. Mauris a ante. Suspendisse quam sem, consequat at, c
 
 Make any link standout more when applying the `.btn` class.
 
-<div markdown="0"><a href="#" class="btn">This is a button</a></div>
+{% highlight html %}
+<a href="#" class="btn btn-success">Success Button</a>
+{% endhighlight %}
 
+<div markdown="0"><a href="#" class="btn">Primary Button</a></div>
+<div markdown="0"><a href="#" class="btn btn-success">Success Button</a></div>
+<div markdown="0"><a href="#" class="btn btn-warning">Warning Button</a></div>
+<div markdown="0"><a href="#" class="btn btn-danger">Danger Button</a></div>
+<div markdown="0"><a href="#" class="btn btn-info">Info Button</a></div>
 
 ## Notices
 

assets/less/elements.less

@@ -51,19 +51,66 @@ svg:not(:root) {
   margin-bottom: 20px;
   padding: 8px 20px;
   .font-rem(14);
-	background-color: @black;
+  background-color: @primary;
   color: @white;
-	border: 2px solid @black !important;
-	.rounded(4px);
+  border-width: 2px !important;
+  border-style: solid !important;
+  border-color: @primary;
+  .rounded(3px);
   &:visited {
     color: @white;
   }
   &:hover {
     background-color: @white;
-		color: @black;
+    color: @primary;
   }
-	&:active {
-		.translate(0, 2px);
+}
+.btn-success {
+  background-color: @success;
+  color: @white;
+  border-color: @success;
+  &:visited {
+    color: @white;
+  }
+  &:hover {
+    background-color: @white;
+    color: @success;
+  }
+}
+.btn-warning {
+  background-color: @warning;
+  color: @white;
+  border-color: @warning;
+  &:visited {
+    color: @white;
+  }
+  &:hover {
+    background-color: @white;
+    color: @warning;
+  }
+}
+.btn-danger {
+  background-color: @danger;
+  color: @white;
+  border-color: @danger;
+  &:visited {
+    color: @white;
+  }
+  &:hover {
+    background-color: @white;
+    color: @danger;
+  }
+}
+.btn-info {
+  background-color: @info;
+  color: @white;
+  border-color: @info;
+  &:visited {
+    color: @white;
+  }
+  &:hover {
+    background-color: @white;
+    color: @info;
   }
 }
 /* Well ================================================= */

assets/less/variables.less

@@ -6,7 +6,7 @@
 @code-font: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
 @alt-font: @base-font;
 
-// COLOR ====================================================
+// COLOR ======================================================
 @bodycolor      : #fff;
 @body-color     : @bodycolor;
 @textcolor      : #333332;
@@ -18,7 +18,15 @@
 @white          : #fff;
 @black          : #111;
 @accentcolor    : @black;
-/* Links ================================================= */
+
+// Buttons
+@primary			: @black;
+@success			: #5cb85c;
+@warning			: #dd8338;
+@danger				: #C64537;
+@info				: #308cbc;
+
+// Links
 @linkcolor 		    : #343434;
 @link-color: @linkcolor;
 @linkcolorhover 	: darken(@linkcolor, 10);