adds docs example for small-expanded button

diff --git a/docs/pages/button.md b/docs/pages/button.md
index 424d1f02fcda6daf032c127f1be16dadf6069a58..2a396abdfa8c34d68621c7ba24656c358655b240 100644 (file)
--- a/docs/pages/button.md
+++ b/docs/pages/button.md
@@ -9,9 +9,14 @@ Creating a bullet-proof button that works in all email clients requires a table
 In Inky HTML, the `<button>` tag creates all of this markup for you.
 
 ```inky_example
-<button href="zurb.com">Button</button>
+<button href="#">Button</button>
 ```
 
+<div class="callout primary">
+- It's important to add an `href` attribute to your `<button>`'s to ensure that Outlook.com will not display `[undefined]` in your rendered email.<br> 
+- Office 365 and Outlook.com require a valid url in the href attribute or you can use the # placeholder.
+</div>
+
 ---
 
 ## Sizing
@@ -37,12 +42,13 @@ Don't forget the `href=""` ;)
 
 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.
+In Inky HTML, add the `.expanded` class to the `<button>` tag. If you want the button to be expanded on small only, add the `.small-expanded`.
 
 ```inky_example
 <row>
   <column>
-    <button href="zurb.com" class="expanded">Expanded Button</button>
+    <button href="#" class="expanded">Expanded Button</button>
+    <button href="#" class="small-expanded">Expand small only</button>
   </column>
 </row>
 ```
@@ -54,10 +60,10 @@ In Inky HTML, add the `.expanded` class to the `<button>` tag.
 Change the background color of a button by adding the class `.secondary`, `.success`, `.warning`, or `.alert` to the outer `<table>` (or the `<button>` tag in Inky HTML).
 
 ```inky_example
-<button href="zurb.com" class="secondary">Secondary Button</button>
-<button href="zurb.com" class="success">Success Button</button>
-<button href="zurb.com" class="warning">Warning Button</button>
-<button href="zurb.com" class="alert">Alert Button</button>
+<button href="#" class="secondary">Secondary Button</button>
+<button href="#" class="success">Success Button</button>
+<button href="#" class="warning">Warning Button</button>
+<button href="#" class="alert">Alert Button</button>
 ```
 
 ---
@@ -75,8 +81,3 @@ Creating buttons with a radius or rounded edges (like a pill) can be achieved by
 <button href="#" class="rounded">Round</button>
 
 ```
-
-<div class="callout primary">
-- It's important to add an `href` attribute to your `<button>`'s to ensure that Outlook.com will not display `[undefined]` in your rendered email.<br> 
-- Office 365 and Outlook.com require a valid url in the href attribute or you can use the # placeholder.
-</div>

diff --git a/test/visual/pages/button-inky.html b/test/visual/pages/button-inky.html
index f169f0157046cf4f3226d48a580f4bd04893a5d3..1a317721bf77e36d3aabe3b9ad3a70a06fe7db78 100644 (file)
--- a/test/visual/pages/button-inky.html
+++ b/test/visual/pages/button-inky.html
@@ -49,14 +49,14 @@
   </row>
   <row>
     <columns small="12" large="12">
-      <button href="http://zurb.com" href="http://zurb.com" class="expand">I expand</button>
+      <button href="http://zurb.com" class="expand">I expand</button>
     </columns>
   </row>
   <row>
     <columns small="12" large="12">
     Expand small only with center tag
       <center>
-        <button href="http://zurb.com" href="http://zurb.com" class="small-expand">Expand small only</button>
+        <button href="http://zurb.com" class="small-expand">Expand small only</button>
       </center>
     </columns>
   </row>
@@ -64,7 +64,7 @@
     <columns small="12" large="12">
     Expand small only
       <center>
-        <button href="http://zurb.com" href="http://zurb.com" class="small-expand">Expand small only</button>
+        <button href="http://zurb.com" class="small-expand">Expand small only</button>
       </center>
     </columns>
   </row>