adding outlined buttons

docs/components.html

@@ -749,6 +749,11 @@ title: Components · Ratchet
       <a class="btn btn-positive">Button</a>
       <a class="btn btn-negative">Button</a>
       <a class="btn btn-link">Button</a>
+
+      <a class="btn btn-outlined">Button</a>
+      <a class="btn btn-primary btn-outlined">Button</a>
+      <a class="btn btn-positive btn-outlined">Button</a>
+      <a class="btn btn-negative btn-outlined">Button</a>
     </div>
 
 {% highlight html %}
@@ -758,6 +763,43 @@ title: Components &middot; Ratchet
 <a class="btn btn-negative">Button</a>
 <a class="btn btn-link">Button</a>
 
+<a class="btn btn-outlined">Button</a>
+<a class="btn btn-primary btn-outlined">Button</a>
+<a class="btn btn-positive btn-outlined">Button</a>
+<a class="btn btn-negative btn-outlined">Button</a>
+{% endhighlight %}
+
+  </article>
+
+  <!-- Buttons -->
+  <article class="component" id="buttons">
+    <h3 class="component-title">Buttons with icons</h3>
+    <p class="component-description">Ratchicons work inside buttons too.</p>
+
+    <div class="component-example">
+      <a class="btn">
+        <span class="icon icon-search"></span>
+        Button
+      </a>
+      <a class="btn btn-primary">
+        <span class="icon icon-search"></span>
+        Button
+      </a>
+      <a class="btn btn-positive">
+        <span class="icon icon-search"></span>
+        Button
+      </a>
+      <a class="btn btn-negative">
+        <span class="icon icon-search"></span>
+        Button
+      </a>
+      <a class="btn btn-link">
+        <span class="icon icon-left"></span>
+        Button
+      </a>
+    </div>
+
+{% highlight html %}
 <a class="btn">
   <span class="icon icon-search"></span>
   Button