From a20a8285e92258dd17d922db6d586d9ac5396ab0 Mon Sep 17 00:00:00 2001 From: Avni Singh Date: Wed, 19 Feb 2025 11:51:44 +0530 Subject: [PATCH 1/2] Added Invisible Hover Button closes --- .../Buttons/Invisible-Hover-Button/index.html | 38 +++++++++++++++++++ assets/json_files/buttons.json | 5 +++ 2 files changed, 43 insertions(+) create mode 100644 Components/Buttons/Invisible-Hover-Button/index.html diff --git a/Components/Buttons/Invisible-Hover-Button/index.html b/Components/Buttons/Invisible-Hover-Button/index.html new file mode 100644 index 00000000..8b173cd7 --- /dev/null +++ b/Components/Buttons/Invisible-Hover-Button/index.html @@ -0,0 +1,38 @@ + + + + + + Hover Effect Button + + + + + + diff --git a/assets/json_files/buttons.json b/assets/json_files/buttons.json index eadea8d8..a5cf4c07 100644 --- a/assets/json_files/buttons.json +++ b/assets/json_files/buttons.json @@ -243,5 +243,10 @@ "title": "Youtube Button", "previewLink": "../../Components/Buttons/Youtube-Button/index.html", "sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Buttons/Youtube-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" } ] \ No newline at end of file From e0903b199695a77edd1c049c3fb20d34085433a0 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Thu, 20 Feb 2025 20:33:12 +0530 Subject: [PATCH 2/2] Added changes --- .../Buttons/Invisible-Hover-Button/index.html | 37 ++++--------------- .../Buttons/Invisible-Hover-Button/style.css | 25 +++++++++++++ assets/json_files/buttons.json | 10 ++--- 3 files changed, 37 insertions(+), 35 deletions(-) create mode 100644 Components/Buttons/Invisible-Hover-Button/style.css diff --git a/Components/Buttons/Invisible-Hover-Button/index.html b/Components/Buttons/Invisible-Hover-Button/index.html index 8b173cd7..ee076cf8 100644 --- a/Components/Buttons/Invisible-Hover-Button/index.html +++ b/Components/Buttons/Invisible-Hover-Button/index.html @@ -1,38 +1,15 @@ + - Hover Effect Button - + + 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 a5cf4c07..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", @@ -243,10 +248,5 @@ "title": "Youtube Button", "previewLink": "../../Components/Buttons/Youtube-Button/index.html", "sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Buttons/Youtube-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" } ] \ No newline at end of file