Merge pull request #120 from gauravsharmatheofficial/main

Rajkumar-justcoder · web-flow · commit 81a44e1bd3eb · 2022-10-23T15:32:22.000+05:30
added a animated css button
diff --git a/buttons/buttons.css b/buttons/buttons.css
@@ -2308,4 +2308,44 @@ a:focus-visible {
     }
 }
 
-/*radzhiv's btn end*/
+/*radzhiv's btn end*/
+
+/* Gaurav Sharma's button 1 starts*/
+
+.gauravsharmatheofficial-btn-1-svg {
+	position: absolute;
+	right: 54px;
+    top: 114px;
+	fill: none;
+	stroke: #fff;
+	stroke-dasharray: 150 480;
+	stroke-dashoffset: 150;
+	transition: 1s ease-in-out;
+}
+
+.gauravsharmatheofficial-btn-1 {
+	width: 180px;
+	height: 60px;
+	cursor: pointer;
+	background: transparent;
+	border: 1px solid #a5d3fd;
+	outline: none;
+	transition: 1s ease-in-out;
+}
+
+.gauravsharmatheofficial-btn-1:hover {
+	transition: 1s ease-in-out;
+	background: #5f9ad4;
+}
+
+.gauravsharmatheofficial-btn-1:hover .gauravsharmatheofficial-btn-1-svg {
+	stroke-dashoffset: -480;
+}
+
+.gauravsharmatheofficial-btn-1-span {
+	color: white;
+	font-size: 18px;
+	font-weight: 100;
+}
+
+/* Gaurav Sharma's button 1 end*/
diff --git a/index.html b/index.html
@@ -593,6 +593,20 @@
             </div>
             <!-- radzhiv's btn end -->
 
+            <!-- Gaurav Sharma's btn start-->
+            <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>
+                <div class="createdby-section">
+                    Created by
+                    <a href="https://github.com/gauravsharmatheofficial"> Gaurav Sharma </a>
+                </div>
+            </div>
+            <!-- Gaurav Sharma's btn end-->
 
         </div>
 
