Added new flipping button

Design-and-Code · Oct 23, 2022 · e357a96 · e357a96
1 parent 81a44e1
commit e357a96
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 0 deletions.
diff --git a/buttons/buttons.css b/buttons/buttons.css
@@ -2349,3 +2349,53 @@ a:focus-visible {
 }
 
 /* Gaurav Sharma's button 1 end*/
+
+.arnav-btn{
+    opacity: 1;
+    outline: 0;
+    color: #fff;
+    line-height: 40px;
+    position: relative;
+    text-align: center;
+    letter-spacing: 1px;
+    display: inline-block;
+    text-decoration: none;
+    font-family: "Inter";
+    font-weight: 700;
+    text-transform: uppercase;
+  }
+  .arnav-btn:hover:after {
+    opacity: 1;
+    transform: translateY(0) rotateX(0);
+  }
+  .arnav-btn:hover:before {
+    opacity: 0;
+    transform: translateY(50%) rotateX(90deg);
+  }
+  .arnav-btn:after {
+    top: 0;
+    left: 0;
+    opacity: 0;
+    width: 100%;
+    color: #323237;
+    display: block;
+    transition: 0.5s;
+    position: absolute;
+    background: #adadaf;
+    content: attr(data-back);
+    transform: translateY(-50%) rotateX(90deg);
+  }
+  .arnav-btn:before {
+    top: 0;
+    left: 0;
+    opacity: 1;
+    color: #adadaf;
+    display: block;
+    padding: 0 30px;
+    line-height: 40px;
+    transition: 0.5s;
+    position: relative;
+    background: #323237;
+    content: attr(data-front);
+    transform: translateY(0) rotateX(0);
+  }
diff --git a/index.html b/index.html
@@ -608,6 +608,16 @@
             </div>
             <!-- Gaurav Sharma's btn end-->
 
+            <!--0b51d14n217's btn-->
+            <div class="button-container">
+                <a class="arnav-btn" data-back="Hover Me" data-front="Hover Me"></a>
+                <div class="createdby-section">
+                    Created by
+                    <a href="https://github.com/0b51d14n217">Arnav Sharma</a>
+                </div>
+            </div>
+            <!--0b51d14n217's btn-->
+
         </div>
 
     </main>