buttons wiggling animation (#2778)

AfreenInnovates · LaurelineP · web-flow · commit 744f2c74a647 · 2024-10-18T17:55:02.000+02:00
Co-authored-by: Laureline Paris &lt;32878345+LaurelineP@users.noreply.github.com&gt;
diff --git a/Art/AfreenInnovates-buttonswiggle/index.html b/Art/AfreenInnovates-buttonswiggle/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Wiggling Buttons</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+
+    <button class="wiggle-button move-right">Wiggle Me Right!</button>
+    <button class="wiggle-button move-left">Wiggle Me Left!</button>
+    <button class="wiggle-button move-up">Wiggle Me Up!</button>
+    <button class="wiggle-button move-down">Wiggle Me Down!</button>
+
+</body>
+</html>
diff --git a/Art/AfreenInnovates-buttonswiggle/meta.json b/Art/AfreenInnovates-buttonswiggle/meta.json
@@ -0,0 +1,4 @@
+{
+  "artName": "wiggling buttons",
+  "githubHandle": "AfreenInnovates"
+}
diff --git a/Art/AfreenInnovates-buttonswiggle/styles.css b/Art/AfreenInnovates-buttonswiggle/styles.css
@@ -0,0 +1,75 @@
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    font-family: Arial, sans-serif;
+}
+
+.wiggle-button {
+    background-color: #4CAF50;
+    border: none;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 10px;
+    cursor: pointer;
+    border-radius: 8px;
+    transition: transform 0.2s ease, background-color 0.3s ease;
+    position: relative;
+}
+
+@keyframes wiggle {
+    0% { transform: rotate(0deg); }
+    25% { transform: rotate(5deg); }
+    50% { transform: rotate(-5deg); }
+    75% { transform: rotate(2deg); }
+    100% { transform: rotate(0deg); }
+}
+
+@keyframes move-right {
+    0% { transform: translateX(0); }
+    50% { transform: translateX(20px); }
+    100% { transform: translateX(0); }
+}
+
+@keyframes move-left {
+    0% { transform: translateX(0); }
+    50% { transform: translateX(-20px); }
+    100% { transform: translateX(0); }
+}
+
+@keyframes move-up {
+    0% { transform: translateY(0); }
+    50% { transform: translateY(-20px); }
+    100% { transform: translateY(0); }
+}
+
+@keyframes move-down {
+    0% { transform: translateY(0); }
+    50% { transform: translateY(20px); }
+    100% { transform: translateY(0); }
+}
+
+.wiggle-button:hover {
+    animation: wiggle 0.3s ease-in-out forwards;
+}
+
+.move-right:hover {
+    animation: move-right 0.3s ease forwards;
+}
+
+.move-left:hover {
+    animation: move-left 0.3s ease forwards;
+}
+
+.move-up:hover {
+    animation: move-up 0.3s ease forwards;
+}
+
+.move-down:hover {
+    animation: move-down 0.3s ease forwards;
+}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +{
 +  "artName": "wiggling buttons",
 +  "githubHandle": "AfreenInnovates"
 +}