Added adilcodes 1st button

Design-and-Code · Mar 25, 2023 · 58fd6e2 · 58fd6e2
1 parent 8abcb61
commit 58fd6e2
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 7 deletions.
diff --git a/buttons/buttons.css b/buttons/buttons.css
@@ -2703,3 +2703,39 @@ a:focus-visible {
     }
   }
 
+
+/* adilcodes-btn-1 start */
+.adilcodes-btn-1{
+    border: 0;
+    cursor: pointer;
+    padding: 13px 32px;
+    font-size: 14px;
+    position: relative;
+    z-index:0;
+    transition: 0.3s ease 0.1s;
+    overflow: hidden;
+    background-color: #fff;
+    box-shadow: 0px 0px 5px 1px #00000011;
+}
+.adilcodes-btn-1::after{
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0%;
+    height: 100%;
+    background-color: rgb(252, 40, 71);
+    transition: 0.5s ease;
+    z-index: -1;
+    scale: 0.6;
+}
+.adilcodes-btn-1:hover::after{
+    width: 100%;
+    scale: 1.21;
+    /* rotate: 180deg; */
+    transform: rotateX(180deg) rotateZ(45deg);
+}
+.adilcodes-btn-1:hover{
+    color: #fff;
+}
+/* adilcodes-btn-1 end */
diff --git a/index.html b/index.html
@@ -633,10 +633,10 @@
             <div class="button-container ">
                 <button class="gauravsharmatheofficial-btn-1">
                     <svg class="gauravsharmatheofficial-btn-1-svg" width="180px" height="60px" viewBox="0 0 180 60">
-                    <polyline points="179,1 179,59 1,59 1,1 179,1"/>
-                    <polyline points="179,1 179,59 1,59 1,1 179,1"/>
-                  </svg>
-                  <span class="gauravsharmatheofficial-btn-1-span"> Hover Me </span></button>
+                        <polyline points="179,1 179,59 1,59 1,1 179,1" />
+                        <polyline points="179,1 179,59 1,59 1,1 179,1" />
+                    </svg>
+                    <span class="gauravsharmatheofficial-btn-1-span"> Hover Me </span></button>
                 <div class="createdby-section">
                     Created by
                     <a href="https://github.com/gauravsharmatheofficial">gauravsharmatheofficial</a>
@@ -666,8 +666,8 @@
             </div>
 
             <!--0b51d14n217's btn-->
-            
-            
+
+
             <!--lavesh's btn-->
             <div class="button-container">
                 <a class="lavesh-btn-1" data-back="Hover Me" data-front="Hover Me">Hover me</a>
@@ -708,6 +708,17 @@
             </div>
             <!-- Amit's  btn-->
 
+            <!-- adilcodes-btn-1 start -->
+            <div class="button-container">
+                <!-- add your buttons here, eg.-->
+                <button class="adilcodes-btn-1">Hover Me</button>
+                <div class="createdby-section">
+                    Created by
+                    <a href="https://github.com/adilcodes">adilcodes</a>
+                </div>
+            </div>
+            <!-- adilcodes-btn-1 end -->
+
 
 
         </div>
@@ -763,4 +774,4 @@
 
 </body>
 
-</html>
+</html>