From c8f570fc2363805baa9ac4ee4172ebf0b2be9a66 Mon Sep 17 00:00:00 2001 From: Sai pradyumna Goud Chiragoni <143107589+Saipradyumnagoud@users.noreply.github.com> Date: Fri, 21 Jun 2024 10:05:46 +0530 Subject: [PATCH 01/28] added Flower effect button --- .../Buttons/Flower-Effect-Button/index.html | 53 +++++ .../Buttons/Flower-Effect-Button/style.css | 206 ++++++++++++++++++ 2 files changed, 259 insertions(+) create mode 100644 Components/Buttons/Flower-Effect-Button/index.html create mode 100644 Components/Buttons/Flower-Effect-Button/style.css diff --git a/Components/Buttons/Flower-Effect-Button/index.html b/Components/Buttons/Flower-Effect-Button/index.html new file mode 100644 index 00000000..8198140e --- /dev/null +++ b/Components/Buttons/Flower-Effect-Button/index.html @@ -0,0 +1,53 @@ + + + + + + Button with Flowers + + + + + + diff --git a/Components/Buttons/Flower-Effect-Button/style.css b/Components/Buttons/Flower-Effect-Button/style.css new file mode 100644 index 00000000..e0803b44 --- /dev/null +++ b/Components/Buttons/Flower-Effect-Button/style.css @@ -0,0 +1,206 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-color: #f0f0f0; + font-family: Arial, sans-serif; +} + +.btn { + height: 4em; + width: 12em; + display: flex; + align-items: center; + justify-content: center; + background: transparent; + border: 0px solid black; + cursor: pointer; + } + + .wrapper { + height: 2em; + width: 8em; + position: relative; + background: transparent; + display: flex; + justify-content: center; + align-items: center; + } + + .text { + font-size: 17px; + z-index: 1; + color: #000; + padding: 4px 12px; + border-radius: 4px; + background: rgba(255, 255, 255, 0.7); + transition: all 0.5s ease; + } + + .flower { + display: grid; + grid-template-columns: 1em 1em; + position: absolute; + transition: grid-template-columns 0.8s ease; + } + + .flower1 { + top: -12px; + left: -13px; + transform: rotate(5deg); + } + + .flower2 { + bottom: -5px; + left: 8px; + transform: rotate(35deg); + } + + .flower3 { + bottom: -15px; + transform: rotate(0deg); + } + + .flower4 { + top: -14px; + transform: rotate(15deg); + } + + .flower5 { + right: 11px; + top: -3px; + transform: rotate(25deg); + } + + .flower6 { + right: -15px; + bottom: -15px; + transform: rotate(30deg); + } + + .petal { + height: 1em; + width: 1em; + border-radius: 40% 70% / 7% 90%; + background: linear-gradient(#07a6d7, #93e0ee); + border: 0.5px solid #96d1ec; + z-index: 0; + transition: width 0.8s ease, height 0.8s ease; + } + + .two { + transform: rotate(90deg); + } + + .three { + transform: rotate(270deg); + } + + .four { + transform: rotate(180deg); + } + + .btn:hover .petal { + background: linear-gradient(#0761d7, #93bdee); + border: 0.5px solid #96b4ec; + } + + .btn:hover .flower { + grid-template-columns: 1.5em 1.5em; + } + + .btn:hover .flower .petal { + width: 1.5em; + height: 1.5em; + } + + .btn:hover .text { + background: rgba(255, 255, 255, 0.4); + } + + .btn:hover div.flower1 { + animation: 15s linear 0s normal none infinite running flower1; + } + + @keyframes flower1 { + 0% { + transform: rotate(5deg); + } + + 100% { + transform: rotate(365deg); + } + } + + .btn:hover div.flower2 { + animation: 13s linear 1s normal none infinite running flower2; + } + + @keyframes flower2 { + 0% { + transform: rotate(35deg); + } + + 100% { + transform: rotate(-325deg); + } + } + + .btn:hover div.flower3 { + animation: 16s linear 1s normal none infinite running flower3; + } + + @keyframes flower3 { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } + } + + .btn:hover div.flower4 { + animation: 17s linear 1s normal none infinite running flower4; + } + + @keyframes flower4 { + 0% { + transform: rotate(15deg); + } + + 100% { + transform: rotate(375deg); + } + } + + .btn:hover div.flower5 { + animation: 20s linear 1s normal none infinite running flower5; + } + + @keyframes flower5 { + 0% { + transform: rotate(25deg); + } + + 100% { + transform: rotate(-335deg); + } + } + + .btn:hover div.flower6 { + animation: 15s linear 1s normal none infinite running flower6; + } + + @keyframes flower6 { + 0% { + transform: rotate(30deg); + } + + 100% { + transform: rotate(390deg); + } + } + \ No newline at end of file From d7baebcee5f6440609f19f8752a87a3262aea591 Mon Sep 17 00:00:00 2001 From: Sai pradyumna Goud Chiragoni <143107589+Saipradyumnagoud@users.noreply.github.com> Date: Wed, 26 Jun 2024 19:59:15 +0530 Subject: [PATCH 02/28] Rename index.html to button.html --- .../Buttons/Flower-Effect-Button/{index.html => button.html} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename Components/Buttons/Flower-Effect-Button/{index.html => button.html} (100%) diff --git a/Components/Buttons/Flower-Effect-Button/index.html b/Components/Buttons/Flower-Effect-Button/button.html similarity index 100% rename from Components/Buttons/Flower-Effect-Button/index.html rename to Components/Buttons/Flower-Effect-Button/button.html From 9eb8068da57e7adac6fdd596129af1570440e265 Mon Sep 17 00:00:00 2001 From: Sai pradyumna Goud Chiragoni <143107589+Saipradyumnagoud@users.noreply.github.com> Date: Wed, 26 Jun 2024 19:59:35 +0530 Subject: [PATCH 03/28] Rename button.html to buttons.html --- .../Buttons/Flower-Effect-Button/{button.html => buttons.html} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename Components/Buttons/Flower-Effect-Button/{button.html => buttons.html} (100%) diff --git a/Components/Buttons/Flower-Effect-Button/button.html b/Components/Buttons/Flower-Effect-Button/buttons.html similarity index 100% rename from Components/Buttons/Flower-Effect-Button/button.html rename to Components/Buttons/Flower-Effect-Button/buttons.html From fdee3382899aa0b1bd19c430b52194a8cb1f018b Mon Sep 17 00:00:00 2001 From: Sai pradyumna Goud Chiragoni <143107589+Saipradyumnagoud@users.noreply.github.com> Date: Wed, 26 Jun 2024 20:08:30 +0530 Subject: [PATCH 04/28] Rename buttons.html to index.html --- .../Buttons/Flower-Effect-Button/{buttons.html => index.html} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename Components/Buttons/Flower-Effect-Button/{buttons.html => index.html} (100%) diff --git a/Components/Buttons/Flower-Effect-Button/buttons.html b/Components/Buttons/Flower-Effect-Button/index.html similarity index 100% rename from Components/Buttons/Flower-Effect-Button/buttons.html rename to Components/Buttons/Flower-Effect-Button/index.html From 023fb706f3cc4644b0a08797efbb458a661047e1 Mon Sep 17 00:00:00 2001 From: Sai pradyumna Goud Chiragoni <143107589+Saipradyumnagoud@users.noreply.github.com> Date: Wed, 26 Jun 2024 20:10:58 +0530 Subject: [PATCH 05/28] Update buttons.html --- assets/html_files/buttons.html | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/assets/html_files/buttons.html b/assets/html_files/buttons.html index 03b27fb6..3155af37 100644 --- a/assets/html_files/buttons.html +++ b/assets/html_files/buttons.html @@ -138,6 +138,19 @@

Flipside Button

+
+

Flower Effect Button

+
+ + + +
+
+ + + +
+

Glassmorphism Button

From 3d1fcf5f9a54ebfb63cda4d34875d03822610a1f Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Wed, 26 Jun 2024 22:56:22 +0530 Subject: [PATCH 06/28] Update index.html --- Components/Buttons/Flower-Effect-Button/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Components/Buttons/Flower-Effect-Button/index.html b/Components/Buttons/Flower-Effect-Button/index.html index 8198140e..a26f1c70 100644 --- a/Components/Buttons/Flower-Effect-Button/index.html +++ b/Components/Buttons/Flower-Effect-Button/index.html @@ -3,8 +3,8 @@ - Button with Flowers + Flower Effect Button
- +
From 8e52b9a5b539c5ac22f44109a126cb966d4101c1 Mon Sep 17 00:00:00 2001 From: Sai pradyumna Goud Chiragoni <143107589+Saipradyumnagoud@users.noreply.github.com> Date: Thu, 27 Jun 2024 18:51:10 +0530 Subject: [PATCH 09/28] Added Like Effect Button --- .../Buttons/Like-Effect-Button/index.html | 38 ++++++++ .../Buttons/Like-Effect-Button/style.css | 94 +++++++++++++++++++ 2 files changed, 132 insertions(+) create mode 100644 Components/Buttons/Like-Effect-Button/index.html create mode 100644 Components/Buttons/Like-Effect-Button/style.css diff --git a/Components/Buttons/Like-Effect-Button/index.html b/Components/Buttons/Like-Effect-Button/index.html new file mode 100644 index 00000000..27febd2f --- /dev/null +++ b/Components/Buttons/Like-Effect-Button/index.html @@ -0,0 +1,38 @@ + + + + + + Like Button + + + + + + diff --git a/Components/Buttons/Like-Effect-Button/style.css b/Components/Buttons/Like-Effect-Button/style.css new file mode 100644 index 00000000..f551cc07 --- /dev/null +++ b/Components/Buttons/Like-Effect-Button/style.css @@ -0,0 +1,94 @@ +button { + display: flex; + justify-content: center; + align-items: center; + padding: 20px 25px 20px 22px; + box-shadow: rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset; + background-color: #e8e8e8; + border-color: #ffe2e2; + border-style: solid; + border-width: 9px; + border-radius: 35px; + font-size: 25px; + cursor: pointer; + font-weight: 900; + color: rgb(134, 124, 124); + font-family: monospace; + transition: transform 400ms cubic-bezier(0.68, -0.55, 0.27, 2.5), + border-color 400ms ease-in-out, background-color 400ms ease-in-out; + word-spacing: -2px; + } + + @keyframes movingBorders { + 0% { + border-color: #fce4e4; + } + + 50% { + border-color: #ffd8d8; + } + + 90% { + border-color: #fce4e4; + } + } + + button:hover { + background-color: #eee; + transform: scale(105%); + animation: movingBorders 3s infinite; + } + + button svg { + margin-right: 11px; + fill: rgb(255, 110, 110); + transition: opacity 100ms ease-in-out; + } + + .filled { + position: absolute; + opacity: 0; + top: 20px; + left: 22px; + } + + @keyframes beatingHeart { + 0% { + transform: scale(1); + } + + 15% { + transform: scale(1.15); + } + + 30% { + transform: scale(1); + } + + 45% { + transform: scale(1.15); + } + + 60% { + transform: scale(1); + } + } + + button:hover .empty { + opacity: 0; + } + + button:hover .filled { + opacity: 1; + animation: beatingHeart 1.2s infinite; + } + + body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-color: #f0f0f0; + font-family: Arial, sans-serif; +} \ No newline at end of file From 4b80e0019ff2ce8858a1e10e86371f67631cc8ec Mon Sep 17 00:00:00 2001 From: Sai pradyumna Goud Chiragoni <143107589+Saipradyumnagoud@users.noreply.github.com> Date: Thu, 27 Jun 2024 18:53:09 +0530 Subject: [PATCH 10/28] Update buttons.html --- assets/html_files/buttons.html | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/assets/html_files/buttons.html b/assets/html_files/buttons.html index 36df4c06..20e04add 100644 --- a/assets/html_files/buttons.html +++ b/assets/html_files/buttons.html @@ -291,6 +291,19 @@

Jelly Button

+
+

Like Button

+
+ + + +
+
+ + + +
+

Liquid Button

From 4ae5cc895026876b97d0bbf49b9daf009d5dc5e1 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sun, 7 Jul 2024 19:01:31 +0530 Subject: [PATCH 11/28] Update index.html --- .../Buttons/Like-Effect-Button/index.html | 47 ++++++------------- 1 file changed, 15 insertions(+), 32 deletions(-) diff --git a/Components/Buttons/Like-Effect-Button/index.html b/Components/Buttons/Like-Effect-Button/index.html index 27febd2f..b804eaba 100644 --- a/Components/Buttons/Like-Effect-Button/index.html +++ b/Components/Buttons/Like-Effect-Button/index.html @@ -1,38 +1,21 @@ - - - - Like Button - + + + + Like Effect Button - + From bb96254fe0008d95ab067bfd9aa9bf361ba85a27 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sun, 7 Jul 2024 19:02:17 +0530 Subject: [PATCH 12/28] Update style.css --- .../Buttons/Like-Effect-Button/style.css | 79 +++++++++---------- 1 file changed, 39 insertions(+), 40 deletions(-) diff --git a/Components/Buttons/Like-Effect-Button/style.css b/Components/Buttons/Like-Effect-Button/style.css index f551cc07..ef1360ff 100644 --- a/Components/Buttons/Like-Effect-Button/style.css +++ b/Components/Buttons/Like-Effect-Button/style.css @@ -14,76 +14,75 @@ button { font-weight: 900; color: rgb(134, 124, 124); font-family: monospace; - transition: transform 400ms cubic-bezier(0.68, -0.55, 0.27, 2.5), - border-color 400ms ease-in-out, background-color 400ms ease-in-out; + transition: transform 400ms cubic-bezier(0.68, -0.55, 0.27, 2.5), border-color 400ms ease-in-out, background-color 400ms ease-in-out; word-spacing: -2px; - } - - @keyframes movingBorders { +} + +@keyframes movingBorders { 0% { - border-color: #fce4e4; + border-color: #fce4e4; } - + 50% { - border-color: #ffd8d8; + border-color: #ffd8d8; } - + 90% { - border-color: #fce4e4; + border-color: #fce4e4; } - } - - button:hover { +} + +button:hover { background-color: #eee; transform: scale(105%); animation: movingBorders 3s infinite; - } - - button svg { +} + +button svg { margin-right: 11px; fill: rgb(255, 110, 110); transition: opacity 100ms ease-in-out; - } - - .filled { +} + +.filled { position: absolute; opacity: 0; top: 20px; left: 22px; - } - - @keyframes beatingHeart { +} + +@keyframes beatingHeart { 0% { - transform: scale(1); + transform: scale(1); } - + 15% { - transform: scale(1.15); + transform: scale(1.15); } - + 30% { - transform: scale(1); + transform: scale(1); } - + 45% { - transform: scale(1.15); + transform: scale(1.15); } - + 60% { - transform: scale(1); + transform: scale(1); } - } - - button:hover .empty { +} + +button:hover .empty { opacity: 0; - } - - button:hover .filled { +} + +button:hover .filled { opacity: 1; animation: beatingHeart 1.2s infinite; - } +} - body { +body { display: flex; justify-content: center; align-items: center; @@ -91,4 +90,4 @@ button { margin: 0; background-color: #f0f0f0; font-family: Arial, sans-serif; -} \ No newline at end of file +} From 9e9b73bf345974a28be47f904d3b0b7362fafd22 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sun, 7 Jul 2024 19:03:15 +0530 Subject: [PATCH 13/28] Update buttons.html --- assets/html_files/buttons.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/html_files/buttons.html b/assets/html_files/buttons.html index 20e04add..c16e806b 100644 --- a/assets/html_files/buttons.html +++ b/assets/html_files/buttons.html @@ -292,14 +292,14 @@

Jelly Button

-

Like Button

+

Like Effect Button

- +
From 1a596436e03a91fbf6f3c9a0f3c12ef5a03a2d1f Mon Sep 17 00:00:00 2001 From: Sai pradyumna Goud Chiragoni <143107589+Saipradyumnagoud@users.noreply.github.com> Date: Mon, 8 Jul 2024 13:43:06 +0530 Subject: [PATCH 14/28] Added BookMark Effect Button --- .../Buttons/BookMark-Effect-Button/index.html | 21 ++++++ .../Buttons/BookMark-Effect-Button/styles.css | 68 +++++++++++++++++++ 2 files changed, 89 insertions(+) create mode 100644 Components/Buttons/BookMark-Effect-Button/index.html create mode 100644 Components/Buttons/BookMark-Effect-Button/styles.css diff --git a/Components/Buttons/BookMark-Effect-Button/index.html b/Components/Buttons/BookMark-Effect-Button/index.html new file mode 100644 index 00000000..308b27c8 --- /dev/null +++ b/Components/Buttons/BookMark-Effect-Button/index.html @@ -0,0 +1,21 @@ + + + + + + + Bookmark Button + + + + + diff --git a/Components/Buttons/BookMark-Effect-Button/styles.css b/Components/Buttons/BookMark-Effect-Button/styles.css new file mode 100644 index 00000000..62236e9b --- /dev/null +++ b/Components/Buttons/BookMark-Effect-Button/styles.css @@ -0,0 +1,68 @@ +body, html { + height: 100%; + display: flex; + align-items: center; + justify-content: center; + margin: 0; + background-color: #000; /* Optional: Add a background color */ +} +.bookmarkBtn { + width: 100px; + height: 40px; + border-radius: 40px; + border: 1px solid rgba(255, 255, 255, 0.349); + background-color: rgb(12, 12, 12); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition-duration: 0.3s; + overflow: hidden; + } + + .IconContainer { + width: 30px; + height: 30px; + background: linear-gradient(to bottom, rgb(255, 136, 255), rgb(172, 70, 255)); + border-radius: 50px; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + z-index: 2; + transition-duration: 0.3s; + } + + .icon { + border-radius: 1px; + } + + .text { + height: 100%; + width: 60px; + display: flex; + align-items: center; + justify-content: center; + color: white; + z-index: 1; + transition-duration: 0.3s; + font-size: 1.04em; + } + + .bookmarkBtn:hover .IconContainer { + width: 90px; + transition-duration: 0.3s; + } + + .bookmarkBtn:hover .text { + transform: translate(10px); + width: 0; + font-size: 0; + transition-duration: 0.3s; + } + + .bookmarkBtn:active { + transform: scale(0.95); + transition-duration: 0.3s; + } + \ No newline at end of file From 9792be2705e7938f6c6f777349da4a83bc8228a5 Mon Sep 17 00:00:00 2001 From: Sai pradyumna Goud Chiragoni <143107589+Saipradyumnagoud@users.noreply.github.com> Date: Mon, 8 Jul 2024 13:46:04 +0530 Subject: [PATCH 15/28] Updated buttons.html --- assets/html_files/buttons.html | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/assets/html_files/buttons.html b/assets/html_files/buttons.html index c1d882c5..70d69a60 100644 --- a/assets/html_files/buttons.html +++ b/assets/html_files/buttons.html @@ -148,6 +148,19 @@

Blob Button

+
+

Book Mark Effect Button

+
+ + + +
+
+ + + +
+

Delete Animation Button

From 7262b6ef913809ff847080f56be163188f56a7c8 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sun, 14 Jul 2024 00:28:39 +0530 Subject: [PATCH 16/28] Update and rename index.html to index.html --- .../Buttons/BookMark-Effect-Button/index.html | 21 ------------------- .../Buttons/Bookmark-Effect-Button/index.html | 19 +++++++++++++++++ 2 files changed, 19 insertions(+), 21 deletions(-) delete mode 100644 Components/Buttons/BookMark-Effect-Button/index.html create mode 100644 Components/Buttons/Bookmark-Effect-Button/index.html diff --git a/Components/Buttons/BookMark-Effect-Button/index.html b/Components/Buttons/BookMark-Effect-Button/index.html deleted file mode 100644 index 308b27c8..00000000 --- a/Components/Buttons/BookMark-Effect-Button/index.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - Bookmark Button - - - - - diff --git a/Components/Buttons/Bookmark-Effect-Button/index.html b/Components/Buttons/Bookmark-Effect-Button/index.html new file mode 100644 index 00000000..8276ce10 --- /dev/null +++ b/Components/Buttons/Bookmark-Effect-Button/index.html @@ -0,0 +1,19 @@ + + + + + + + Bookmark Effect Button + + + + + From 711824e5d64b4ed9c29b3517dea295c9d9d7bfbb Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sun, 14 Jul 2024 00:29:11 +0530 Subject: [PATCH 17/28] Update and rename styles.css to style.css --- .../style.css} | 45 ++++++++++--------- 1 file changed, 23 insertions(+), 22 deletions(-) rename Components/Buttons/{BookMark-Effect-Button/styles.css => Bookmark-Effect-Button/style.css} (77%) diff --git a/Components/Buttons/BookMark-Effect-Button/styles.css b/Components/Buttons/Bookmark-Effect-Button/style.css similarity index 77% rename from Components/Buttons/BookMark-Effect-Button/styles.css rename to Components/Buttons/Bookmark-Effect-Button/style.css index 62236e9b..49634d0a 100644 --- a/Components/Buttons/BookMark-Effect-Button/styles.css +++ b/Components/Buttons/Bookmark-Effect-Button/style.css @@ -1,11 +1,13 @@ -body, html { +body, +html { height: 100%; display: flex; align-items: center; justify-content: center; margin: 0; - background-color: #000; /* Optional: Add a background color */ + background-color: #000; } + .bookmarkBtn { width: 100px; height: 40px; @@ -18,9 +20,9 @@ body, html { cursor: pointer; transition-duration: 0.3s; overflow: hidden; - } - - .IconContainer { +} + +.IconContainer { width: 30px; height: 30px; background: linear-gradient(to bottom, rgb(255, 136, 255), rgb(172, 70, 255)); @@ -31,13 +33,13 @@ body, html { overflow: hidden; z-index: 2; transition-duration: 0.3s; - } - - .icon { +} + +.icon { border-radius: 1px; - } - - .text { +} + +.text { height: 100%; width: 60px; display: flex; @@ -47,22 +49,21 @@ body, html { z-index: 1; transition-duration: 0.3s; font-size: 1.04em; - } - - .bookmarkBtn:hover .IconContainer { +} + +.bookmarkBtn:hover .IconContainer { width: 90px; transition-duration: 0.3s; - } - - .bookmarkBtn:hover .text { +} + +.bookmarkBtn:hover .text { transform: translate(10px); width: 0; font-size: 0; transition-duration: 0.3s; - } - - .bookmarkBtn:active { +} + +.bookmarkBtn:active { transform: scale(0.95); transition-duration: 0.3s; - } - \ No newline at end of file +} From 6a4192a3602b316ad09ea8d35e463d1c2a3684ed Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sun, 14 Jul 2024 00:30:03 +0530 Subject: [PATCH 18/28] Update buttons.html --- assets/html_files/buttons.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/assets/html_files/buttons.html b/assets/html_files/buttons.html index 70d69a60..da3b5693 100644 --- a/assets/html_files/buttons.html +++ b/assets/html_files/buttons.html @@ -149,14 +149,14 @@

Blob Button

-

Book Mark Effect Button

+

Bookmark Effect Button

- +
- +
From 03ddcce047b1f57042e0220aa4888440dc3fd980 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sun, 14 Jul 2024 00:33:30 +0530 Subject: [PATCH 19/28] Update buttons.html --- assets/html_files/buttons.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/html_files/buttons.html b/assets/html_files/buttons.html index da3b5693..1ab0bb5e 100644 --- a/assets/html_files/buttons.html +++ b/assets/html_files/buttons.html @@ -156,7 +156,7 @@

Bookmark Effect Button

- +
From cd0ccc9c9f57aefbceda58e716b4dc1bacf66fd2 Mon Sep 17 00:00:00 2001 From: Sai pradyumna Goud Chiragoni <143107589+Saipradyumnagoud@users.noreply.github.com> Date: Sun, 14 Jul 2024 13:10:41 +0530 Subject: [PATCH 20/28] Added Glitch Effect Button --- .../Buttons/Glitch-Effect-Button/index.html | 14 +++ .../Buttons/Glitch-Effect-Button/styles.css | 109 ++++++++++++++++++ 2 files changed, 123 insertions(+) create mode 100644 Components/Buttons/Glitch-Effect-Button/index.html create mode 100644 Components/Buttons/Glitch-Effect-Button/styles.css diff --git a/Components/Buttons/Glitch-Effect-Button/index.html b/Components/Buttons/Glitch-Effect-Button/index.html new file mode 100644 index 00000000..3f7478bc --- /dev/null +++ b/Components/Buttons/Glitch-Effect-Button/index.html @@ -0,0 +1,14 @@ + + + + + + Glitch Effect Button + + + + + + diff --git a/Components/Buttons/Glitch-Effect-Button/styles.css b/Components/Buttons/Glitch-Effect-Button/styles.css new file mode 100644 index 00000000..2c484377 --- /dev/null +++ b/Components/Buttons/Glitch-Effect-Button/styles.css @@ -0,0 +1,109 @@ +/* Center the button in the middle of the page */ +body, html { + height: 100%; + display: flex; + align-items: center; + justify-content: center; + margin: 0; + background-color: #000; /* Optional: Add a background color */ +} + +button, button::after { + padding: 10px 50px; + font-size: 20px; + border: none; + border-radius: 5px; + color: white; + background-color: transparent; + position: relative; +} + +button::after { + --move1: inset(50% 50% 50% 50%); + --move2: inset(31% 0 40% 0); + --move3: inset(39% 0 15% 0); + --move4: inset(45% 0 40% 0); + --move5: inset(45% 0 6% 0); + --move6: inset(14% 0 61% 0); + clip-path: var(--move1); + content: 'GLITCH'; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: block; +} + +button:hover::after { + animation: glitch_4011 1s; + text-shadow: 10 10px 10px black; + animation-timing-function: steps(2, end); + text-shadow: -3px -3px 0px #1df2f0, 3px 3px 0px #E94BE8; + background-color: transparent; + border: 3px solid rgb(0, 255, 213); +} + +button:hover { + text-shadow: -1px -1px 0px #1df2f0, 1px 1px 0px #E94BE8; + background-color: transparent; + border: 1px solid rgb(0, 255, 213); + box-shadow: 0px 10px 10px -10px rgb(0, 255, 213); +} + +@keyframes glitch_4011 { + 0% { + clip-path: var(--move1); + transform: translate(0px, -10px); + } + + 10% { + clip-path: var(--move2); + transform: translate(-10px, 10px); + } + + 20% { + clip-path: var(--move3); + transform: translate(10px, 0px); + } + + 30% { + clip-path: var(--move4); + transform: translate(-10px, 10px); + } + + 40% { + clip-path: var(--move5); + transform: translate(10px, -10px); + } + + 50% { + clip-path: var(--move6); + transform: translate(-10px, 10px); + } + + 60% { + clip-path: var(--move1); + transform: translate(10px, -10px); + } + + 70% { + clip-path: var(--move3); + transform: translate(-10px, 10px); + } + + 80% { + clip-path: var(--move2); + transform: translate(10px, -10px); + } + + 90% { + clip-path: var(--move4); + transform: translate(-10px, 10px); + } + + 100% { + clip-path: var(--move1); + transform: translate(0); + } +} From 08ce748a38ee802b9265d35ff2236865aa438d70 Mon Sep 17 00:00:00 2001 From: Sai pradyumna Goud Chiragoni <143107589+Saipradyumnagoud@users.noreply.github.com> Date: Sun, 14 Jul 2024 13:12:17 +0530 Subject: [PATCH 21/28] Updated buttons.html --- assets/html_files/buttons.html | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/assets/html_files/buttons.html b/assets/html_files/buttons.html index 4a7f0ad6..b9ede388 100644 --- a/assets/html_files/buttons.html +++ b/assets/html_files/buttons.html @@ -265,6 +265,19 @@

Gradient Button

+
+

Glitch Effect Button

+
+ + + +
+
+ + + +
+

Hover Animation Button

From a338457c559789d514d7ed29c088f89ebd8a230a Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sun, 14 Jul 2024 14:41:22 +0530 Subject: [PATCH 22/28] Update index.html --- Components/Buttons/Glitch-Effect-Button/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Components/Buttons/Glitch-Effect-Button/index.html b/Components/Buttons/Glitch-Effect-Button/index.html index 3f7478bc..fc7bcce4 100644 --- a/Components/Buttons/Glitch-Effect-Button/index.html +++ b/Components/Buttons/Glitch-Effect-Button/index.html @@ -3,8 +3,8 @@ + Glitch Effect Button -
+
+

Glitch Effect Button

+
+ + + +
+
+ + + +
+

Glow Button

@@ -265,19 +278,6 @@

Gradient Button

-
-

Glitch Effect Button

-
- - - -
-
- - - -
-

Hover Animation Button

From a4cf7872f1a020cd82ed9b774035f02a8457eb27 Mon Sep 17 00:00:00 2001 From: Sai pradyumna Goud Chiragoni <143107589+Saipradyumnagoud@users.noreply.github.com> Date: Sun, 28 Jul 2024 17:50:37 +0530 Subject: [PATCH 25/28] Added Delete Effect Button --- .../Buttons/Delete-Effect-Button/index.html | 16 +++++ .../Buttons/Delete-Effect-Button/styles.css | 63 +++++++++++++++++++ 2 files changed, 79 insertions(+) create mode 100644 Components/Buttons/Delete-Effect-Button/index.html create mode 100644 Components/Buttons/Delete-Effect-Button/styles.css diff --git a/Components/Buttons/Delete-Effect-Button/index.html b/Components/Buttons/Delete-Effect-Button/index.html new file mode 100644 index 00000000..7fbd3e51 --- /dev/null +++ b/Components/Buttons/Delete-Effect-Button/index.html @@ -0,0 +1,16 @@ + + + + + + Delete Effect Button + + + + + + diff --git a/Components/Buttons/Delete-Effect-Button/styles.css b/Components/Buttons/Delete-Effect-Button/styles.css new file mode 100644 index 00000000..fcc0a107 --- /dev/null +++ b/Components/Buttons/Delete-Effect-Button/styles.css @@ -0,0 +1,63 @@ +html, body { + height: 100%; + display: flex; + align-items: center; + justify-content: center; + margin: 0; + background-color: #f0f0f0; +.button { + width: 50px; + height: 50px; + border-radius: 50%; + background-color: rgb(20, 20, 20); + border: none; + font-weight: 600; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.164); + cursor: pointer; + transition-duration: .3s; + overflow: hidden; + position: relative; + } + + .svgIcon { + width: 12px; + transition-duration: .3s; + } + + .svgIcon path { + fill: white; + } + + .button:hover { + width: 140px; + border-radius: 50px; + transition-duration: .3s; + background-color: rgb(255, 69, 69); + align-items: center; + } + + .button:hover .svgIcon { + width: 50px; + transition-duration: .3s; + transform: translateY(60%); + } + + .button::before { + position: absolute; + top: -20px; + content: "Delete"; + color: white; + transition-duration: .3s; + font-size: 2px; + } + + .button:hover::before { + font-size: 13px; + opacity: 1; + transform: translateY(30px); + transition-duration: .3s; + } + \ No newline at end of file From 0ab8eb0c3c06c9758cbebcfa14c7c1bcec4d54f7 Mon Sep 17 00:00:00 2001 From: Sai pradyumna Goud Chiragoni <143107589+Saipradyumnagoud@users.noreply.github.com> Date: Sun, 28 Jul 2024 17:52:38 +0530 Subject: [PATCH 26/28] Update buttons.html --- assets/html_files/buttons.html | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/assets/html_files/buttons.html b/assets/html_files/buttons.html index a946663c..6eada8dc 100644 --- a/assets/html_files/buttons.html +++ b/assets/html_files/buttons.html @@ -174,6 +174,19 @@

Delete Animation Button

+
+

Delete Effect Button

+
+ + + +
+
+ + + +
+

Flipside Button

@@ -631,4 +644,4 @@

Wiggle Button

- \ No newline at end of file + From 0756be057a5540439a6df661716cacc8a93800a0 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Fri, 2 Aug 2024 18:54:39 +0530 Subject: [PATCH 27/28] Update index.html --- .../Buttons/Delete-Effect-Button/index.html | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/Components/Buttons/Delete-Effect-Button/index.html b/Components/Buttons/Delete-Effect-Button/index.html index 7fbd3e51..c24b42bf 100644 --- a/Components/Buttons/Delete-Effect-Button/index.html +++ b/Components/Buttons/Delete-Effect-Button/index.html @@ -1,16 +1,16 @@ - - - Delete Effect Button - + + + + Delete Effect Button - + From 87f77ee748688d3357d9c21d42f32dbd1183f6cf Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Fri, 2 Aug 2024 18:55:08 +0530 Subject: [PATCH 28/28] Update and rename styles.css to style.css --- .../{styles.css => style.css} | 46 ++++++++++--------- 1 file changed, 24 insertions(+), 22 deletions(-) rename Components/Buttons/Delete-Effect-Button/{styles.css => style.css} (78%) diff --git a/Components/Buttons/Delete-Effect-Button/styles.css b/Components/Buttons/Delete-Effect-Button/style.css similarity index 78% rename from Components/Buttons/Delete-Effect-Button/styles.css rename to Components/Buttons/Delete-Effect-Button/style.css index fcc0a107..85cd6709 100644 --- a/Components/Buttons/Delete-Effect-Button/styles.css +++ b/Components/Buttons/Delete-Effect-Button/style.css @@ -1,10 +1,13 @@ -html, body { +html, +body { height: 100%; display: flex; align-items: center; justify-content: center; margin: 0; - background-color: #f0f0f0; + background-color: #f0f0f0; +} + .button { width: 50px; height: 50px; @@ -20,44 +23,43 @@ html, body { transition-duration: .3s; overflow: hidden; position: relative; - } - - .svgIcon { +} + +.svgIcon { width: 12px; transition-duration: .3s; - } - - .svgIcon path { +} + +.svgIcon path { fill: white; - } - - .button:hover { +} + +.button:hover { width: 140px; border-radius: 50px; transition-duration: .3s; background-color: rgb(255, 69, 69); align-items: center; - } - - .button:hover .svgIcon { +} + +.button:hover .svgIcon { width: 50px; transition-duration: .3s; transform: translateY(60%); - } - - .button::before { +} + +.button::before { position: absolute; top: -20px; content: "Delete"; color: white; transition-duration: .3s; font-size: 2px; - } - - .button:hover::before { +} + +.button:hover::before { font-size: 13px; opacity: 1; transform: translateY(30px); transition-duration: .3s; - } - \ No newline at end of file +}