add a styled button with a wave like animation

kkartik07 · kkartik07 · commit 53b621496a68 · 2022-10-11T18:08:22.000+05:30
diff --git a/buttons/buttons.css b/buttons/buttons.css
@@ -1744,4 +1744,36 @@ a:focus-visible {
 	animation:slidebg 5s linear infinite;
 }
 
-/* cypherrs 2nd bt end  */
+/* cypherrs 2nd bt end  */
+
+/* kkartik07's 1st btn start */
+.kkartik07-1-btn {
+	padding: 18px 32px;
+	font-size: 30px;
+	border: none;
+	outline: none;
+	font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+	cursor: pointer;
+	margin: 8px 15px;
+	transition: 0.2s ease;
+	background: #003877d5;
+	color: rgba(255, 255, 255, 0.756);
+	position: relative;
+	overflow: hidden;
+	box-shadow: rgba(110, 110, 119, 0.452) 0px 8px 30px 0px;
+  }
+  .kkartik07-1-btn::before {
+	width: 200%;
+	height: 200%;
+	content: "";
+	transform: rotate(-45deg);
+	position: absolute;
+	top: -10%;
+	left: -180%;
+	background: rgba(119, 129, 238, 0.2);
+	transition: 0.3s ease-in-out;
+  }
+  .kkartik07-1-btn:hover::before {
+	left: 55%;
+  }
+/* kkartik07's 1st btn end */
diff --git a/index.html b/index.html
@@ -431,6 +431,19 @@
                 </div>
             </div>
             <!-- cyphers 2nd button end -->
+
+
+            <!-- kkartik07's button start -->
+            <div class="button-container">
+                <button class="kkartik07-1-btn"> Hover me </button>
+                <div class="createdby-section">
+                    Created by
+                    <a href="https://github.com/kkartik07">kkartik07</a>
+                </div>
+            </div>
+            <!-- kkartik07's button end -->
+
+
           </div>
            
 
