From 0c6aac280f67b983d7a943542569f9844dfaf4a2 Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Sat, 12 Jan 2019 13:53:37 +0200
Subject: [PATCH] Update button-border

---
 snippets/button-border.md | 41 ++++++++++-----------------------------
 1 file changed, 10 insertions(+), 31 deletions(-)

diff --git a/snippets/button-border.md b/snippets/button-border.md
index fa7860ec4..0a8af3493 100644
--- a/snippets/button-border.md
+++ b/snippets/button-border.md
@@ -5,67 +5,46 @@ Creates a border animation on hover.
 #### HTML
 
 ```html
-<button class="button">Submit</button>
+<div class="button-border">
+  <button class="button">Submit</button>
+</div>
 ```
 
 #### CSS
 
 ```css
-@import url(https://fonts.googleapis.com/css?family=BenchNine:700);
 .button {
   background-color: #c47135;
   border: none;
   color: #ffffff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: 'BenchNine', Arial, sans-serif;
-  font-size: 1em;
-  font-size: 22px;
-  line-height: 1em;
-  margin: 15px 40px;
   outline: none;
   padding: 12px 40px 10px;
   position: relative;
-  text-transform: uppercase;
-  font-weight: 700;
 }
-
 .button:before,
 .button:after {
-  border-color: transparent;
-  -webkit-transition: all 0.25s;
+  border: 0 solid transparent;
   transition: all 0.25s;
-  border-style: solid;
-  border-width: 0;
   content: '';
   height: 24px;
   position: absolute;
   width: 24px;
 }
-
 .button:before {
-  border-color: #c47135;
-  border-top-width: 2px;
+  border-top: 2px solid #c47135;
   left: 0px;
   top: -5px;
 }
-
 .button:after {
-  border-bottom-width: 2px;
-  border-color: #c47135;
+  border-bottom: 2px solid #c47135;
   bottom: -5px;
   right: 0px;
 }
-
-.button:hover,
-.button.hover {
+.button:hover {
   background-color: #c47135;
 }
-
 .button:hover:before,
-.button.hover:before,
-.button:hover:after,
-.button.hover:after {
+.button:hover:after {
   height: 100%;
   width: 100%;
 }
@@ -75,11 +54,11 @@ Creates a border animation on hover.
 
 #### Explanation
 
-This effect is uses before and after selectors to make the border full width on hover.
+Use the `:before` and `:after` pseduo-elements as borders that animate on hover.
 
 #### Browser support
 
 <span class="snippet__support-note">✅ No caveats.</span>
 
-<!-- tags: visual, interactivity -->
+<!-- tags: animation -->
 <!-- date: 2018-10-30 -->