Travis build: 136 [FORCED]

index.html

@@ -38,7 +38,7 @@
         </section>
         <section data-type="animation" class="sidebar__section">
           <h4 class="sidebar__section-heading">animation</h4>
-          <a class="sidebar__link" href="#bouncing-loader"><span>Bouncing loader</span></a><a class="sidebar__link" href="#donut-spinner"><span>Donut spinner</span></a><a class="sidebar__link" href="#easing-variables"><span>Easing variables</span></a><a class="sidebar__link" href="#height-transition"><span>Height transition</span></a><a class="sidebar__link" href="#hover-shadow-box-animation"><span>Hover Shadow Box Animation</span></a><a class="sidebar__link" href="#hover-underline-animation"><span>Hover underline animation</span></a>
+          <a class="sidebar__link" href="#bouncing-loader"><span>Bouncing loader</span></a><a class="sidebar__link" href="#button-border"><span>Button border animation</span></a><a class="sidebar__link" href="#donut-spinner"><span>Donut spinner</span></a><a class="sidebar__link" href="#easing-variables"><span>Easing variables</span></a><a class="sidebar__link" href="#height-transition"><span>Height transition</span></a><a class="sidebar__link" href="#hover-shadow-box-animation"><span>Hover Shadow Box Animation</span></a><a class="sidebar__link" href="#hover-underline-animation"><span>Hover underline animation</span></a>
         </section>
         <section data-type="interactivity" class="sidebar__section">
           <h4 class="sidebar__section-heading">interactivity</h4>
@@ -239,6 +239,99 @@
 
             <!-- tags: layout -->
           </div>
+          <div class="snippet">
+            <h3 id="button-border-animation"><span>Button border animation</span><span class="tags__tag snippet__tag" data-type="animation"><i data-feather="loader"></i>animation</span></h3>
+            <p>Creates a border animation on hover.</p>
+            <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="button-border"&gt;
+  &lt;button class="button"&gt;Submit&lt;/button&gt;
+&lt;/div&gt;
+</code></pre>
+            <h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.button {
+  background-color: #c47135;
+  border: none;
+  color: #ffffff;
+  outline: none;
+  padding: 12px 40px 10px;
+  position: relative;
+}
+.button:before,
+.button:after {
+  border: 0 solid transparent;
+  transition: all 0.25s;
+  content: '';
+  height: 24px;
+  position: absolute;
+  width: 24px;
+}
+.button:before {
+  border-top: 2px solid #c47135;
+  left: 0px;
+  top: -5px;
+}
+.button:after {
+  border-bottom: 2px solid #c47135;
+  bottom: -5px;
+  right: 0px;
+}
+.button:hover {
+  background-color: #c47135;
+}
+.button:hover:before,
+.button:hover:after {
+  height: 100%;
+  width: 100%;
+}
+</code></pre>
+            <h4>Demo</h4>
+            <div class="snippet-demo" data-scope="button-border.md">
+              <div class="button-border">
+                <button class="button">Submit</button>
+              </div>
+            </div>
+            <style>[data-scope="button-border.md"] .button {
+  background-color: #c47135;
+  border: none;
+  color: #ffffff;
+  outline: none;
+  padding: 12px 40px 10px;
+  position: relative; }
+[data-scope="button-border.md"] .button:before,
+[data-scope="button-border.md"] .button:after {
+  border: 0 solid transparent;
+  transition: all 0.25s;
+  content: '';
+  height: 24px;
+  position: absolute;
+  width: 24px; }
+[data-scope="button-border.md"] .button:before {
+  border-top: 2px solid #c47135;
+  left: 0px;
+  top: -5px; }
+[data-scope="button-border.md"] .button:after {
+  border-bottom: 2px solid #c47135;
+  bottom: -5px;
+  right: 0px; }
+[data-scope="button-border.md"] .button:hover {
+  background-color: #c47135; }
+[data-scope="button-border.md"] .button:hover:before,
+[data-scope="button-border.md"] .button:hover:after {
+  height: 100%;
+  width: 100%; }
+</style>
+            <h4>Explanation</h4>
+            <p>Use the <code>:before</code> and <code>:after</code> pseduo-elements as borders that animate on hover.</p>
+            <h4>Browser support</h4>
+            <div>
+              <div class="snippet__browser-support">
+                99+%
+              </div>
+            </div>
+            <p><span class="snippet__support-note">✅ No caveats.</span></p>
+
+            <!-- tags: animation -->
+
+            <!-- date: 2018-10-30 -->
+          </div>
           <div class="snippet">
             <h3 id="calc"><span>Calc()</span><span class="tags__tag snippet__tag" data-type="other"><i data-feather="tag"></i>other</span></h3>
             <p>The function calc() allows to define CSS values with the use of mathematical expressions, the value adopted for the property is the result of a mathematical expression.</p>
@@ -1334,9 +1427,7 @@ If no link is provided, it defaults to 99+%. -->
             <h3 id="ghost-trick"><span>Ghost trick</span><span class="tags__tag snippet__tag" data-type="layout"><i data-feather="layout"></i>layout</span></h3>
             <p>Vertically centers an element in another.</p>
             <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="ghost-trick"&gt;
-  &lt;div class="ghosting"&gt;
+  &lt;div class="ghosting"&gt;&lt;p&gt;Vertically centered without changing the position property.&lt;/p&gt;&lt;/div&gt;
-    &lt;p&gt;Vertically centered without changing the position property.&lt;/p&gt;
-  &lt;/div&gt;
 &lt;/div&gt;
 </code></pre>
             <h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.ghosting {
@@ -1344,7 +1435,7 @@ If no link is provided, it defaults to 99+%. -->
   background: #0ff;
 }
 .ghosting:before {
-  content: "";
+  content: '';
   display: inline-block;
   height: 100%;
   vertical-align: middle;
@@ -1366,7 +1457,7 @@ p {
   height: 300px;
   background: #0ff; }
 [data-scope="ghost-trick.md"] .ghosting:before {
-  content: "";
+  content: '';
   display: inline-block;
   height: 100%;
   vertical-align: middle; }

snippets/button-border.md

@@ -5,9 +5,7 @@ Creates a border animation on hover.
 #### HTML
 
 ```html
-<div class="button-border">
+<div class="button-border"><button class="button">Submit</button></div>
-  <button class="button">Submit</button>
-</div>
 ```
 
 #### CSS