Update button border animation

ushakov-igor · Apr 20, 2020 · 0f8fe28 · 0f8fe28
1 parent 197e1e2
commit 0f8fe28
Showing 1 changed file with 17 additions and 22 deletions.
diff --git a/snippets/button-border-animation.md b/snippets/button-border-animation.md
@@ -6,48 +6,43 @@ tags: animation,intermediate
 Creates a border animation on hover.
 
 ```html
-<div class="button-border"><button class="button">Submit</button></div>
+<button class="animated-border-button">Submit</button>
 ```
 
 ```css
-.button {
-  background-color: #c47135;
+.animated-border-button {
+  background-color: #141414;
   border: none;
   color: #ffffff;
   outline: none;
   padding: 12px 40px 10px;
   position: relative;
 }
 
-.button:before,
-.button:after {
+.animated-border-button:before,
+.animated-border-button:after {
   border: 0 solid transparent;
-  transition: all 0.25s;
+  transition: all 0.3s;
   content: '';
-  height: 24px;
+  height: 0;
   position: absolute;
   width: 24px;
 }
 
-.button:before {
-  border-top: 2px solid #c47135;
-  left: 0px;
-  top: -5px;
+.animated-border-button:before {
+  border-top: 2px solid #141414;
+  right: 0;
+  top: -4px;
 }
 
-.button:after {
-  border-bottom: 2px solid #c47135;
-  bottom: -5px;
-  right: 0px;
+.animated-border-button:after {
+  border-bottom: 2px solid #141414;
+  bottom: -4px;
+  left: 0;
 }
 
-.button:hover {
-  background-color: #c47135;
-}
-
-.button:hover:before,
-.button:hover:after {
-  height: 100%;
+.animated-border-button:hover:before,
+.animated-border-button:hover:after {
   width: 100%;
 }
 ```