Merge pull request #129 from Aditya-ahirwar/aditya-ahirwar

added a animated button

Author: Rajkumar-justcoder

buttons/buttons.css

@@ -2310,6 +2310,47 @@ a:focus-visible {
 
 /*radzhiv's btn end*/
 
+
+/* Aditya's button starts */
+
+.aditya-btn-1 {
+    width: 150px;
+    height: 50px;
+    color: white;
+    position: relative;
+    display: inline-block;
+    background: rgb(0, 68, 255);
+    border: none;
+    border-radius: 4px;
+    padding: 10px 25px;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    font-weight: 20px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    z-index: 1;
+  }
+  .aditya-btn-1:after {
+    position: absolute;
+    content: "";
+    width: 0;
+    height: 0;
+    top: 0;
+    left: 0;
+    border-radius: 5px;
+    background-image: linear-gradient(275deg, #190c8e 0%, #b53232 74%);
+    transition: all 0.2s ease-in-out;
+    z-index: -1;
+  }
+   .aditya-btn-1:hover:after {
+    top: auto;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 40%;
+    border: none;
+  }
+/* Aditya's button end  */
+
 /* Gaurav Sharma's button 1 starts*/
 
 .gauravsharmatheofficial-btn-1-svg {

index.html

@@ -588,11 +588,23 @@
                 <button class="radzhiv-btn-1">Hover me</button>
                 <div class="createdby-section">
                     Created by
-                    <a href="https://github.com/radzhiv25">radzhiv</a>
+                    <a href="https://github.com/radzhiv25">radzhiv25</a>
                 </div>
             </div>
             <!-- radzhiv's btn end -->
 
+
+            <!-- Aditya's btn start -->
+            <div class="button-container">
+                <button class="aditya-btn-1">Hover Me</button>
+                <div class="createdby-section">
+                    Created by
+                    <a href="https://github.com/Aditya-ahirwar">Aditya-ahirwar</a>
+                </div>
+            </div>
+            <!-- Aditya's btn end -->
+
+
             <!-- Gaurav Sharma's btn start-->
             <div class="button-container ">
                 <button class="gauravsharmatheofficial-btn-1">
@@ -603,11 +615,12 @@
                   <span class="gauravsharmatheofficial-btn-1-span"> Hover Me </span></button>
                 <div class="createdby-section">
                     Created by
-                    <a href="https://github.com/gauravsharmatheofficial"> Gaurav Sharma </a>
+                    <a href="https://github.com/gauravsharmatheofficial">gauravsharmatheofficial</a>
                 </div>
             </div>
             <!-- Gaurav Sharma's btn end-->
 
+
         </div>
 
     </main>