adds button cp links

diff --git a/docs/pages/button.md b/docs/pages/button.md
index 6bcdd4c23f287fdd8343d36684cd734df75f5f30..998806fefb01b7ccd032c7fba9ec4c160e6e90c7 100644 (file)
--- a/docs/pages/button.md
+++ b/docs/pages/button.md
@@ -18,6 +18,12 @@ A basic button can be created with minimal markup. Because buttons can be used f
   <p>Add the attribute <code>type="button"</code> to <code>&lt;button&gt;</code> elements, unless the button submits a form, in which case you use <code>type="submit"</code></p>
 </div>
 
+<div class="docs-video-codepen-container">
+  <a class="" data-open-video="0:51"><img src="https://www.elastic.co/static/images/svg/video-play-btn.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+
+  <a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/wdmZME?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
 ```html_example
 <!-- Anchors (links) -->
 <a href="about.html" class="button">Learn More</a>
@@ -34,6 +40,12 @@ A basic button can be created with minimal markup. Because buttons can be used f
 
 Additional classes can be added to your button to change its size and shape.
 
+<div class="docs-video-codepen-container">
+  <a class="" data-open-video="2:08"><img src="https://www.elastic.co/static/images/svg/video-play-btn.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+
+  <a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/JNLVRb?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
 ```html_example
 <a class="button tiny" href="#">So Tiny</a>
 <a class="button small" href="#">So Small</a>
@@ -49,6 +61,12 @@ Additional classes can be added to your button to change its size and shape.
 
 Add color classes to give buttons additional meaning.
 
+<div class="docs-video-codepen-container">
+  <a class="" data-open-video="2:52"><img src="https://www.elastic.co/static/images/svg/video-play-btn.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+
+  <a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/xdjVOp?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
 ```html_example
 <a class="button primary" href="#">Primary</a>
 <a class="button secondary" href="#">Secondary</a>
@@ -70,7 +88,7 @@ $button-palette: map-remove($foundation-palette, (
     primary,
     secondary
 )) !default;
-```  
+```
 
 Or you can add more colors to the default palette.
 
@@ -106,6 +124,11 @@ The text color for each button class is determined by either `$button-color` or
 
 The `.disabled` class will give buttons a faded appearance. The class is a purely visual style, and won't actually disable a control. For `<button>` elements, you can add the `disabled` attribute to both disable and style it. If you want to disable a link, you should add the `aria-disabled` attribute to mark it as disabled for assistive technology.
 
+<div class="docs-video-codepen-container">
+  <a class="" data-open-video="3:19"><img src="https://www.elastic.co/static/images/svg/video-play-btn.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+
+  <a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/xdjVOp?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
 
 ```html_example
 <a class="button disabled" href="#" aria-disabled>Disabled</a>
@@ -122,6 +145,12 @@ The `.disabled` class will give buttons a faded appearance. The class is a purel
 
 Add the `.hollow` class to a button to give it a hollow style. Change the `$button-fill` variable in your settings file to `hollow` to make this the default style. Changing this setting will remove the `.hollow` class from your CSS.
 
+<div class="docs-video-codepen-container">
+  <a class="" data-open-video="4:04"><img src="https://www.elastic.co/static/images/svg/video-play-btn.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+
+  <a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/LymNyB?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
 ```html_example
 <button class="hollow button" href="#">Primary</button>
 <button class="hollow button secondary" href="#">Secondary</button>
@@ -141,6 +170,8 @@ Add a dropdown arrow to your button with the `.dropdown` class.
   <p>This doesn't add dropdown functionality automatically. To do that, you can attach our <a href="dropdown.html">Dropdown plugin</a>.</p>
 </div>
 
+<a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/PmeNOY?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+
 ```html_example
 <button class="dropdown button tiny ">Dropdown Button</button>
 <button class="dropdown button small ">Dropdown Button</button>