diff --git a/Components/Buttons/Invisible-Hover-Button/index.html b/Components/Buttons/Invisible-Hover-Button/index.html
new file mode 100644
index 00000000..ee076cf8
--- /dev/null
+++ b/Components/Buttons/Invisible-Hover-Button/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+ Invisible Hover Button
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Components/Buttons/Invisible-Hover-Button/style.css b/Components/Buttons/Invisible-Hover-Button/style.css
new file mode 100644
index 00000000..736eb09b
--- /dev/null
+++ b/Components/Buttons/Invisible-Hover-Button/style.css
@@ -0,0 +1,25 @@
+body {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ background-color: #f4f4f4; /* Light background color */
+}
+
+.hidden-text {
+ color: transparent; /* Text is invisible */
+ text-decoration: none;
+ text-underline-offset: 4px;
+ font-size: 20px;
+ padding: 10px 20px;
+ background-color: #e0e0e0; /* Background color */
+ border-radius: 8px;
+ transition: color 0.3s ease-in-out, text-decoration-color 0.3s ease-in-out;
+ cursor: pointer;
+}
+
+.hidden-text:hover {
+ color: blue;
+ text-decoration: wavy underline;
+ text-decoration-color: blue;
+}
\ No newline at end of file
diff --git a/assets/json_files/buttons.json b/assets/json_files/buttons.json
index eadea8d8..7f6f4898 100644
--- a/assets/json_files/buttons.json
+++ b/assets/json_files/buttons.json
@@ -119,6 +119,11 @@
"previewLink": "../../Components/Buttons/Impossible-Toggle-Button/index.html",
"sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Buttons/Impossible-Toggle-Button"
},
+ {
+ "title": "Invisible Hover Button",
+ "previewLink": "../../Components/Buttons/Invisible-Hover-Button/index.html",
+ "sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Buttons/Invisible-Hover-Button"
+ },
{
"title": "Jelly Button",
"previewLink": "../../Components/Buttons/Jelly-Button/index.html",