Add icon border animation snippet

index.html

@@ -65,6 +65,8 @@
           <a class="sidebar__link" href="#button-border">
             <img alt="New" draggable="false" class="sidebar__new" src="./src/img/new.svg"><span>Toggle switch</span></a>
           <a class="sidebar__link" href="#disable-selection"><span>Disable selection</span></a>
+          <a class="sidebar__link" href="#icon-border">
+            <img alt="New" draggable="false" class="sidebar__new" src="./src/img/new.svg"><span>Icon Border Animation</span></a>
           <a class="sidebar__link" href="#mouse-cursor-gradient-tracking"><span>Mouse cursor gradient tracking</span></a>
           <a class="sidebar__link" href="#popout-menu"><span>Popout menu</span></a>
           <a class="sidebar__link" href="#sibling-fade"><span>Sibling fade</span></a>
@@ -1750,6 +1752,134 @@ el.style.setProperty('--max-height', height + 'px')
 
             <!-- tags: animation -->
           </div>
+          <div class="snippet">
+            <img alt="New" draggable="false" class="snippet__new" src="./src/img/new.svg">
+            <h3 id="icon-border-animation"><span>Icon Border Animation</span><span class="tags__tag snippet__tag" data-type="visual"><i data-feather="eye"></i>visual</span><span class="tags__tag snippet__tag" data-type="interactivity"><i data-feather="edit-2"></i>interactivity</span></h3>
+            <p>Creates a border animation on hover.</p>
+            <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;a href="#" class="button ion-ios-star-outline"&gt;&lt;/a&gt;
+</code></pre>
+            <h4 data-type="CSS">CSS</h4><pre><code class="lang-css">@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
+.button {
+  position: relative;
+  overflow: hidden;
+  font-size: 40px;
+  color: rgba(255, 255, 255, 0.8);
+  margin: 40px;
+  padding: 3px;
+  display: inline-block;
+  text-align: center;
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
+  text-decoration: none;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.button::before {
+  background-color: #2b2b2b;
+  width: 75px;
+  height: 75px;
+  line-height: 75px;
+}
+.button:after {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: #f39c12;
+  content: '';
+  z-index: -1;
+  display: inline-block;
+  -webkit-transform: rotate(-45deg) scale(1.5) translate(0%, -100%);
+  transform: rotate(-45deg) scale(1.5) translate(0%, -100%);
+}
+.button:before,
+.button:after {
+  -webkit-transition: all 0.4s ease-in-out;
+  transition: all 0.4s ease-in-out;
+}
+.button:hover,
+.button:active,
+.button.hover {
+  color: #ffffff;
+}
+.button:hover:after,
+.button:active:after,
+.button.hover:after {
+  -webkit-transform: rotate(-45deg) scale(1.5) translate(0%, 0%);
+  transform: rotate(-45deg) scale(1.5) translate(0%, 0%);
+}
+</code></pre>
+            <h4>Demo</h4>
+            <div class="snippet-demo" data-scope="icon-border.md">
+              <a href="#" class="button ion-ios-star-outline"></a>
+            </div>
+            <style>
+              @import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
+              [data-scope="icon-border.md"] {}
+              [data-scope="icon-border.md"] .button {
+                position: relative;
+                overflow: hidden;
+                font-size: 40px;
+                color: rgba(255, 255, 255, 0.8);
+                margin: 40px;
+                padding: 3px;
+                display: inline-block;
+                text-align: center;
+                text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
+                text-decoration: none;
+                -webkit-box-sizing: border-box;
+                box-sizing: border-box;
+              }
+              [data-scope="icon-border.md"] .button::before {
+                background-color: #2b2b2b;
+                width: 75px;
+                height: 75px;
+                line-height: 75px;
+              }
+              [data-scope="icon-border.md"] .button:after {
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                background-color: #f39c12;
+                content: '';
+                z-index: -1;
+                display: inline-block;
+                -webkit-transform: rotate(-45deg) scale(1.5) translate(0%, -100%);
+                transform: rotate(-45deg) scale(1.5) translate(0%, -100%);
+              }
+              [data-scope="icon-border.md"] .button:before,
+              [data-scope="icon-border.md"] .button:after {
+                -webkit-transition: all 0.4s ease-in-out;
+                transition: all 0.4s ease-in-out;
+              }
+              [data-scope="icon-border.md"] .button:hover,
+              [data-scope="icon-border.md"] .button:active,
+              [data-scope="icon-border.md"] .button.hover {
+                color: #ffffff;
+              }
+              [data-scope="icon-border.md"] .button:hover:after,
+              [data-scope="icon-border.md"] .button:active:after,
+              [data-scope="icon-border.md"] .button.hover:after {
+                -webkit-transform: rotate(-45deg) scale(1.5) translate(0%, 0%);
+                transform: rotate(-45deg) scale(1.5) translate(0%, 0%);
+              }
+            </style>
+            <h4>Explanation</h4>
+            <p>This effect is uses before and after selectors to make the border full width 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: visual, interactivity -->
+
+            <!-- date: 2018-10-30 -->
+          </div>
           <div class="snippet">
             <img alt="New" draggable="false" class="snippet__new" src="./src/img/new.svg">
             <h3 id="last-item-with-remaining-available-height"><span>Last item with remaining available height</span><span class="tags__tag snippet__tag" data-type="layout"><i data-feather="layout"></i>layout</span></h3>

snippets/icon-border.md

@@ -0,0 +1,77 @@
+### Icon Border Animation
+
+Creates a border animation on hover.
+
+#### HTML
+
+```html
+<a href="#" class="button ion-ios-star-outline"></a>
+```
+
+#### CSS
+
+```css
+@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
+.button {
+  position: relative;
+  overflow: hidden;
+  font-size: 40px;
+  color: rgba(255, 255, 255, 0.8);
+  margin: 40px;
+  padding: 3px;
+  display: inline-block;
+  text-align: center;
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
+  text-decoration: none;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.button::before {
+  background-color: #2b2b2b;
+  width: 75px;
+  height: 75px;
+  line-height: 75px;
+}
+.button:after {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: #f39c12;
+  content: '';
+  z-index: -1;
+  display: inline-block;
+  -webkit-transform: rotate(-45deg) scale(1.5) translate(0%, -100%);
+  transform: rotate(-45deg) scale(1.5) translate(0%, -100%);
+}
+.button:before,
+.button:after {
+  -webkit-transition: all 0.4s ease-in-out;
+  transition: all 0.4s ease-in-out;
+}
+.button:hover,
+.button:active,
+.button.hover {
+  color: #ffffff;
+}
+.button:hover:after,
+.button:active:after,
+.button.hover:after {
+  -webkit-transform: rotate(-45deg) scale(1.5) translate(0%, 0%);
+  transform: rotate(-45deg) scale(1.5) translate(0%, 0%);
+}
+```
+
+#### Demo
+
+#### Explanation
+
+This effect is uses before and after selectors to make the border full width on hover.
+
+#### Browser support
+
+<span class="snippet__support-note">✅ No caveats.</span>
+
+<!-- tags: visual, interactivity -->
+<!-- date: 2018-10-30 -->