Added wiggle animation button

Design-and-Code · Oct 23, 2022 · 16d834b · 16d834b
1 parent 81a44e1
commit 16d834b
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 0 deletions.
diff --git a/buttons/buttons.css b/buttons/buttons.css
@@ -2349,3 +2349,46 @@ a:focus-visible {
 }
 
 /* Gaurav Sharma's button 1 end*/
+
+/* getRicha-btn-1 start */
+
+.getRicha-btn-1 {
+    background-color: #47cf73;
+    padding: 7px;
+    width: 100px;
+    cursor: pointer;
+}
+
+.getRicha-btn-1:hover {
+    animation: getRicha-btn-1-wiggle 2s infinite;
+}
+
+@keyframes getRicha-btn-1-wiggle {
+    5%,
+    50% {
+      transform: scale(1);
+    }
+    10% {
+      transform: scale(1);
+    }
+    15% {
+      transform: scale(1);
+    }
+    20% {
+      transform: scale(1) rotate(-5deg);
+    }
+    25% {
+      transform: scale(1) rotate(5deg);
+    }
+    30% {
+      transform: scale(1) rotate(-3deg);
+    }
+    35% {
+      transform: scale(1) rotate(2deg);
+    }
+    40% {
+      transform: scale(1) rotate(0);
+    }
+}
+
+/* getRicha-btn-1 end */
diff --git a/index.html b/index.html
@@ -608,6 +608,16 @@
             </div>
             <!-- Gaurav Sharma's btn end-->
 
+            <!-- getRicha-btn-1 start -->
+            <div class="button-container">
+                <button class="getRicha-btn-1">Hover Me</button>
+                <div class="createdby-section">
+                    Created by
+                    <a href="https://github.com/getRicha">getRicha</a>
+                </div>
+            </div>
+            <!-- getRicha-btn-1 end -->
+
         </div>
 
     </main>