updates buttons docs

diff --git a/docs/pages/alignment.md b/docs/pages/alignment.md
index f1b080cc3b5ed9ab715afb8ecc740c5a3db59912..79d20ee0cc07a264de5437604dcb0e111c3ebfad 100644 (file)
--- a/docs/pages/alignment.md
+++ b/docs/pages/alignment.md
@@ -5,6 +5,8 @@ description: Centering, images, text and buttons in HTML emails made easy.
 
 Foundation includes a handful of helpful alignment classes to add common positioning behaviors to elements.
 
+---
+
 ## Text alignment
 
 You can align text with the `.text-x` classes. These classes will appy to the large breakpoint as well as the small.
@@ -62,6 +64,8 @@ You can combine these classes to override the behavior on the small breakpoint.
 </container>
 ```
 
+---
+
 ## Centering images
 
 Just wrap the `<center>` around an image you’ll be good to go. Inky will handle the magic behind the scenes! In the CSS version, you’ll add a `.float-center` class, `align="center"` attribute and wrap a <code>&lt;center&gt;</code> tag to make sure things are centered. 
@@ -103,6 +107,8 @@ If you need to center an image only on mobile clients, you can apply the `.small
 </container>
 ```
 
+---
+
 ## Aligning images left and right
 
 You can also align images to the left or the right.
@@ -119,6 +125,8 @@ You can also align images to the left or the right.
 </container>
 ```
 
+---
+
 ## Centering a button
 
 Wrap the button with `<center>` tags to center it.
@@ -135,6 +143,8 @@ Wrap the button with `<center>` tags to center it.
 </container>
 ```
 
+---
+
 ## Centering columns
 
 Tables by nature take up as much space is available to them. Because of this, centering columns can be done by adding empty columns to left and right of the column to be centered.

diff --git a/docs/pages/button.md b/docs/pages/button.md
index 8d0e96193b9a5172a3e026ab044008bf5d7a786e..039605f7630439092fab956fea4016168f8eb780 100644 (file)
--- a/docs/pages/button.md
+++ b/docs/pages/button.md
@@ -21,21 +21,24 @@ Buttons can be made larger or smaller by adding the class `.tiny`, `.small`, or
 In Inky HTML, add the same class to the `<button>` tag.
 
 ```inky_example
-<button href="zurb.com" class="tiny">Tiny Button</button>
-<button href="zurb.com" class="small">Small Button</button>
-<button href="zurb.com" class="large">Large Button</button>
+<button href="#" class="tiny">Tiny Button</button>
+<button href="#" class="small">Small Button</button>
+<button href="#">Default Button</button>
+<button href="#" class="large">Large Button</button>
 ```
 
+Don't forget the `href=""` ;)
+
 ---
 
 ## Expanded
 
-To create an expanded button, add the class `.expanded` to the outer `<table>` of the button, and wrap a `<center>` tag around the `<a>`.
+To create an expanded button (full width of it's container), add the class `.expanded` to the outer `<table>` of the button, and wrap a `<center>` tag around the `<a>`.
 
 In Inky HTML, add the `.expanded` class to the `<button>` tag.
 
 ```inky_example
-<button href="zurb.com" class="expand">Expanded Button</button>
+<button href="zurb.com" class="expanded">Expanded Button</button>
 ```
 
 ---