Add button size classes

_includes/author-profile.html

@@ -18,7 +18,7 @@
   </div>
 
   <div class="author__urls-wrapper">
-    <button class="btn btn--inverse">Follow</button>
+    <button class="btn btn--inverse btn--small">Follow</button>
     <ul class="author__urls social-icons">
       {% if author.uri %}
         <li><a href="{{ author.uri }}" target="_blank"><i class="fa fa-fw fa-globe"></i>Website</a></li>

_posts/2013-01-11-markup-html-tags-and-formatting.md

@@ -121,6 +121,20 @@ Make any link standout more when applying the `.btn` class.
 [Info Button Text](#link){: .btn .btn--info}
 ```
 
+[X-Large Button](#){: .btn .btn--x-large}
+[Large Button](#){: .btn .btn--large}
+[Default Button](#){: .btn}
+[Small Button](#){: .btn .btn--small}
+[X-Small Button](#){: .btn .btn--x-small}
+
+```markdown
+[X-Large Button](#){: .btn .btn--x-large}
+[Large Button](#){: .btn .btn--large}
+[Default Button](#){: .btn}
+[Small Button](#){: .btn .btn--small}
+[X-Small Button](#){: .btn .btn--x-small}
+```
+
 ## Notices
 
 **Watch out!** You can also add notices by appending `{: .notice}` to a paragraph.

assets/_scss/_buttons.scss

@@ -10,15 +10,15 @@
   /* default button */
   display: inline-block;
   margin-bottom: 0.25em;
-  padding: 10px 20px;
+  padding: 0.5em 1em;
   color: #fff !important;
   font-family: $sans-serif;
-  font-size: 0.8rem;
+  font-size: 14px;
   font-weight: bold;
   line-height: 1.5;
   text-align: center;
   text-decoration: none;
-  background-color: #000;
+  background-color: $primary-color;
   border: 0 !important;
   border-radius: $border-radius;
   cursor: pointer;
@@ -133,4 +133,28 @@
       }
     }
   }
+
+  /* extra large button */
+
+  &--x-large {
+    font-size: 24px;
+  }
+
+  /* large button */
+
+  &--large {
+    font-size: 18px;
+  }
+
+  /* small button */
+
+  &--small {
+    font-size: 12px;
+  }
+
+  /* extra small button */
+  &--x-small {
+    font-size: 10px;
+    font-weight: normal;
+  }
 }

assets/_scss/_sidebar.scss

@@ -143,10 +143,6 @@
     display: block;
   }
   .btn {
-    margin: 0;
-    padding: 5px 10px;
-    color: mix(#fff, $gray, 25%);
-
     @include breakpoint($large) {
       display: none;
     }