Added Push Sideward Hover Button

avnisinngh · avnisinngh · commit ed999a0de9e4 · 2025-02-23T09:55:35.000+05:30
diff --git a/Components/Buttons/Push-Sideward-Hover-Button/index.html b/Components/Buttons/Push-Sideward-Hover-Button/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Styled Hover Button</title>
+    <style>
+        /* Centering the button */
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            background-color: #f4f4f4; /* Light background */
+        }
+
+        /* Button Styling */
+        .group {
+            position: relative;
+            display: inline-flex;
+            height: 50px;
+            width: 150px;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            border-radius: 8px;
+            border: 2px solid #525252;
+            font-size: 16px;
+            font-weight: 600;
+            cursor: pointer;
+            background-color: white;
+        }
+
+        /* Default Text */
+        .button-text {
+            position: absolute;
+            display: flex;
+            height: 100%;
+            width: 100%;
+            align-items: center;
+            justify-content: center;
+            background-color: white;
+            color: #222;
+            transition: transform 0.3s ease-in-out;
+        }
+
+        /* Hover Text */
+        .button-hover {
+            position: absolute;
+            display: flex;
+            height: 100%;
+            width: 100%;
+            align-items: center;
+            justify-content: center;
+            background-color: #3498db; /* Blue background */
+            color: white;
+            transform: translateX(100%);
+            transition: transform 0.3s ease-in-out;
+        }
+
+        /* Hover Effect */
+        .group:hover .button-text {
+            transform: translateX(-100%);
+        }
+        .group:hover .button-hover {
+            transform: translateX(0);
+        }
+    </style>
+</head>
+<body>
+    <button class="group">
+        <div class="button-text">Hover me</div>
+        <div class="button-hover">Hover me</div>
+    </button>
+</body>
+</html>
diff --git a/assets/json_files/buttons.json b/assets/json_files/buttons.json
@@ -199,6 +199,12 @@
         "previewLink": "../../Components/Buttons/Pulsing-Button/index.html",
         "sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Buttons/Pulsing-Button"
     },
+    {
+        "title": "Push Sideward Hover Button",
+        "previewLink": "../../Components/Buttons/Push-Sideward-Hover-Button/index.html",
+        "sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Buttons/Push-Sideward-Hover-Button"
+
+    },
     {
         "title": "Rainbow Animation Button",
         "previewLink": "../../Components/Buttons/Rainbow-Animation-Button/index.html",
