Merge pull request #133 from 0b51d14n217/main

Rajkumar-justcoder · web-flow · commit e3f644f4ba8d · 2022-10-24T15:26:46.000+05:30
Added new flipping button
diff --git a/buttons/buttons.css b/buttons/buttons.css
@@ -2435,3 +2435,53 @@ a:focus-visible {
 
 /* Gaurav Sharma's button 1 end*/
 
+.arnav-btn-1{
+    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-1:hover:after {
+    opacity: 1;
+    transform: translateY(0) rotateX(0);
+  }
+  .arnav-btn-1:hover:before {
+    opacity: 0;
+    transform: translateY(50%) rotateX(90deg);
+  }
+  .arnav-btn-1: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-1: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
@@ -632,6 +632,16 @@
             <!-- Gaurav Sharma's btn end-->
 
 
+            <!--0b51d14n217's btn-->
+            <div class="button-container">
+                <a class="arnav-btn-1" data-back="Hover Me" data-front="Hover Me"></a>
+                <div class="createdby-section">
+                    Created by
+                    <a href="https://github.com/0b51d14n217">0b51d14n217</a>
+                </div>
+            </div>
+            <!--0b51d14n217's btn-->
+
         </div>
 
     </main>
@@ -685,4 +695,4 @@
 
 </body>
 
-</html>
+</html>
