Added a new button with hover effect

radzhiv25 · radzhiv25 · commit 96e810639f0e · 2022-10-13T07:44:28.000+05:30
diff --git a/buttons/buttons.css b/buttons/buttons.css
@@ -1744,4 +1744,32 @@ a:focus-visible {
 	animation:slidebg 5s linear infinite;
 }
 
-/* cypherrs 2nd bt end  */
+/* cypherrs 2nd bt end  */
+
+/* radzhiv's btn start*/
+.newbtn-btn-1{
+	padding: 10px;
+	font-size: 20px;
+	font-weight: bolder;
+	border-radius: 5px;
+	background-image: linear-gradient(to right,#3494E6,#ec6ead);
+	color: white;
+}
+.newbtn-btn-1:hover{
+	text-align: center;
+	color: #f35626;
+	background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	animation: hue 10s infinite linear;
+}
+
+@keyframes hue {
+  from {
+    -webkit-filter: hue-rotate(0deg);
+  }
+  to {
+    -webkit-filter: hue-rotate(-360deg);
+  }
+}
+/*radzhiv's btn end*/
diff --git a/index.html b/index.html
@@ -8,6 +8,7 @@
     <title>CSS Buttons</title>
     <link rel="stylesheet" href="./assets/css/style.css" />
     <link rel="stylesheet" href="./buttons/buttons.css" />
+    <link rel="stylesheet" href="./buttons/buttons.scss">
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet" />
@@ -431,10 +432,16 @@
                 </div>
             </div>
             <!-- cyphers 2nd button end -->
-          </div>
-           
-
-
+                                  <!-- radzhiv's btn start -->
+                                  <div class="button-container">
+                                    <button class="newbtn-btn-1">Hover me</button>
+                                    <div class="createdby-section">
+                                        Created by
+                                        <a href="https://github.com/radzhiv25">radzhiv</a>
+                                    </div>
+                                </div>
+                                <!-- radzhiv's btn end -->
+        </div>
         </div>
 
     </main>
