From 0bcceef451581822305aa591e6522ae6dd41291b Mon Sep 17 00:00:00 2001 From: spence709 Date: Sat, 11 Oct 2025 22:39:38 -0400 Subject: [PATCH 1/2] update : Want to add a trendy hover effect button --- buttons/buttons.css | 87 +++ index.html | 1678 +++++++++++++++++++++++-------------------- 2 files changed, 1005 insertions(+), 760 deletions(-) diff --git a/buttons/buttons.css b/buttons/buttons.css index d3dc362..17b5f0f 100644 --- a/buttons/buttons.css +++ b/buttons/buttons.css @@ -2703,3 +2703,90 @@ a:focus-visible { } } +/* Trendy Glow Button */ +.trendy-glow-btn { + position: relative; + padding: 18px 40px; + font-size: 16px; + font-weight: 600; + color: #fff; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + border: none; + border-radius: 50px; + cursor: pointer; + overflow: hidden; + transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); + box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); +} + +.trendy-glow-btn::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(135deg, #764ba2 0%, #667eea 100%); + opacity: 0; + transition: opacity 0.4s ease; +} + +.trendy-glow-btn::after { + content: ''; + position: absolute; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; + background: linear-gradient(45deg, #667eea, #764ba2, #f093fb, #4facfe); + background-size: 400%; + border-radius: 50px; + z-index: -1; + opacity: 0; + transition: opacity 0.4s ease; + animation: glow-rotate 8s linear infinite; +} + +.trendy-glow-btn span { + position: relative; + z-index: 1; + transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); + display: inline-block; +} + +.trendy-glow-btn:hover { + transform: translateY(-3px) scale(1.05); + box-shadow: 0 8px 30px rgba(102, 126, 234, 0.6), + 0 0 40px rgba(118, 75, 162, 0.4); +} + +.trendy-glow-btn:hover::before { + opacity: 1; +} + +.trendy-glow-btn:hover::after { + opacity: 1; + filter: blur(20px); +} + +.trendy-glow-btn:hover span { + transform: scale(1.1); +} + +.trendy-glow-btn:active { + transform: translateY(-1px) scale(1.02); + box-shadow: 0 4px 20px rgba(102, 126, 234, 0.5); +} + +@keyframes glow-rotate { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + diff --git a/index.html b/index.html index a8dbf87..0a2ace9 100644 --- a/index.html +++ b/index.html @@ -1,767 +1,925 @@ - - - - - - - CSS Buttons - - - - - - - - -
-
-
CSS Buttons
-
- A collection of simple and subtle CSS-only hover animations for - buttons. ✨ -
-
-
-
-
-
- -
- Created by - Design and Code -
-
-
- - -
- Created by - Design and Code -
-
-
- -
- Created by - Design and Code -
-
-
- -
- Created by - Design and Code -
-
-
- -
- Created by - Design and Code -
-
-
- -
- Created by - Design and Code -
-
- - - - + + -
- -
- Created by - jackwebdev -
-
- - - - -
- -
- Created by - Rhysha Kachari -
-
- -
- -
- Created by - Amit Sahoo -
-
- -
- -
- Created by - Amit Sahoo -
-
- -
- -
- Created by - Amit Sahoo -
-
- - - - -
- -
- Created by - Mahek jain -
-
- - - - -
-
- - - - - - Neon button!!
Hover Me - -
-
- Created by - Mahek jain -
-
- - - -
- -
- Created by - Ingrzs -
-
- - - -
- -
- Created by - Mahi Chowdhury -
-
- -
- -
- Created by - Mahi Chowdhury -
-
- -
- -
- Created by - Mahi Chowdhury -
-
- -
- -
- Created by - Mahi Chowdhury -
-
- - - -
- -
- Created by - AjayMaheshwari -
-
- - - -
-
- -
-
- Created by - ImOnlyYisus -
-
- - -
- -
- Created by - mjmanas -
-
- -
- -
- Created by - Anurag -
-
- - -
- -
- Created by - raulwwq0 -
-
- - - - -
- -
- Created by - Mayank1170 -
-
- - -
- -
- Created by - Srishti Majumder -
-
- - - -
- -
- Created by - Olamilekan -
-
- - - -
- -
- Created by - cypher 1002 -
-
- - - - -
- - - - -
- Created by - Swaroop -
-
- - - -
- -
- Created by - Blurry Brush -
-
- - - -
- -
- Created by - Harsh_DD -
-
- - - -
- -
- Created by - Ankush Roy -
-
- - - -
- -
- Created by - davidbru -
-
- - - - -
- -
- Created by - Aniket Sinha -
-
- - - -
- -
- Created by - Harsh Jain -
-
- - - -
-
-
-
-
-
-
-
-
- -
-
- Created by - Harsh Jain -
-
- - - -
- -
- Created by - Nitish Singh -
-
- - -
- -
- Created by - Thiago Souza -
-
- - - -
- -
- Created by - cypher1002 -
-
- - - -
- -
- Created by - kkartik07 -
-
- - - - -
- -
- Created by Deepak Kumar -
-
- - - -
-
- - -
-
- Created by - Shridhar Kamat -
-
- - - - -
- - -
- Created by - Anup Haldar -
-
- - - - -
- -
Created by Shani
-
- - - -
- -
- Created by - Nitish Singh -
-
- - - -
- -
- Created by - Sumit -
-
- - - -
- -
- Created by - Sumit -
-
- - - -
- -
- Created by - Sumit -
-
- - - -
- -
- Created by - dilshad360 -
-
- - - -
- -
- Created by - Jasim Razi -
-
- - - - -
- -
- Created by - cypher 1002 -
-
- - - - -
- -
- Created by - Deepesh Sharma -
-
- - -
- -
- Created by - Arvind0302 -
-
- - - -
- -
- Created by - radzhiv25 -
-
- - - - -
- -
- Created by - shivanshi-s -
-
- - - - -
- - -
- Created by - avishaan24 -
-
- - - - -
- -
- Created by - Aditya-ahirwar -
-
- - - - -
- -
- Created by - gauravsharmatheofficial -
-
- - - - -
- -
- Created by - getRicha -
-
- - - - -
- -
- Created by - 0b51d14n217 -
-
- - - - - -
- Hover me -
- Created by - laveshverma007 -
-
- - - -
- HOVER ME -
- Created by - 0b51d14n217 -
-
- - - -
- -
- Created by - radzhiv25 -
-
- - - -
- -
- Created by - amthub -
-
- - - - -
- -
- - - - - - - +
+ +
+ Created by + jackwebdev +
+
+ + + + +
+ +
+ Created by + Rhysha Kachari +
+
+ +
+ +
+ Created by + Amit Sahoo +
+
+ +
+ +
+ Created by + Amit Sahoo +
+
+ +
+ +
+ Created by + Amit Sahoo +
+
+ + + + +
+ +
+ Created by + Mahek jain +
+
+ + + + +
+
+ + + + + + Neon button!!
Hover Me + +
+
+ Created by + Mahek jain +
+
+ + + +
+ +
+ Created by + Ingrzs +
+
+ + + +
+ +
+ Created by + Mahi Chowdhury +
+
+ +
+ +
+ Created by + Mahi Chowdhury +
+
+ +
+ +
+ Created by + Mahi Chowdhury +
+
+ +
+ +
+ Created by + Mahi Chowdhury +
+
+ + + +
+ +
+ Created by + AjayMaheshwari +
+
+ + + +
+
+ +
+
+ Created by + ImOnlyYisus +
+
+ + +
+ +
+ Created by + mjmanas +
+
+ +
+ +
+ Created by + Anurag +
+
+ + +
+ +
+ Created by + raulwwq0 +
+
+ + + +
+ +
+ Created by + Mayank1170 +
+
+ + +
+ +
+ Created by + Srishti Majumder +
+
+ + +
+ +
+ Created by + Olamilekan +
+
+ + + +
+ +
+ Created by + cypher 1002 +
+
+ + + +
+ + + + +
+ Created by + Swaroop +
+
+ + + +
+ +
+ Created by + Blurry Brush +
+
+ + + +
+ +
+ Created by + Harsh_DD +
+
+ + + +
+ +
+ Created by + Ankush Roy +
+
+ + + +
+ +
+ Created by + davidbru +
+
+ + + +
+ +
+ Created by + Aniket Sinha +
+
+ + + +
+ +
+ Created by + Harsh Jain +
+
+ + + +
+
+
+
+
+
+
+
+
+
+
+ Created by + Harsh Jain +
+
+ + + +
+ +
+ Created by + Nitish Singh +
+
+ + +
+ +
+ Created by + Thiago Souza +
+
+ + + +
+ +
+ Created by + cypher1002 +
+
+ + + +
+ +
+ Created by + kkartik07 +
+
+ + + +
+ +
+ Created by + Deepak Kumar +
+
+ + + +
+
+ + +
+
+ Created by + Shridhar Kamat +
+
+ + + +
+ + +
+ Created by + Anup Haldar +
+
+ + + +
+ +
+ Created by + Shani +
+
+ + + +
+ +
+ Created by + Nitish Singh +
+
+ + + +
+ +
+ Created by + Sumit +
+
+ + + +
+ +
+ Created by + Sumit +
+
+ + + +
+ +
+ Created by + Sumit +
+
+ + + +
+ +
+ Created by + dilshad360 +
+
+ + + +
+ +
+ Created by + Jasim Razi +
+
+ + + +
+ +
+ Created by + cypher 1002 +
+
+ + + +
+ +
+ Created by + + Deepesh Sharma + +
+
+ + +
+ +
+ Created by + Arvind0302 +
+
+ + + +
+ +
+ Created by + radzhiv25 +
+
+ + + +
+ +
+ Created by + shivanshi-s +
+
+ + + +
+ + +
+ Created by + avishaan24 +
+
+ + + +
+ +
+ Created by + Aditya-ahirwar +
+
+ + + +
+ +
+ Created by + gauravsharmatheofficial +
+
+ + + +
+ +
+ Created by + getRicha +
+
+ + + +
+ +
+ Created by + 0b51d14n217 +
+
+ + + + +
+ Hover me +
+ Created by + laveshverma007 +
+
+ + +
+ HOVER ME +
+ Created by + 0b51d14n217 +
+
+ + + +
+ +
+ Created by + radzhiv25 +
+
+ + + +
+ +
+ Created by + amthub +
+
+ + + +
+ +
+ Created by + spence709 +
+
+ + + + + + + From 372e9c2281bf4645e17355acd8ac41338eab81a2 Mon Sep 17 00:00:00 2001 From: spence709 Date: Sat, 11 Oct 2025 22:44:04 -0400 Subject: [PATCH 2/2] fix L update the tag name with mine --- buttons/buttons.css | 25 +++++++++++++------------ index.html | 18 +++++++++--------- 2 files changed, 22 insertions(+), 21 deletions(-) diff --git a/buttons/buttons.css b/buttons/buttons.css index 17b5f0f..30c2ae9 100644 --- a/buttons/buttons.css +++ b/buttons/buttons.css @@ -2703,8 +2703,8 @@ a:focus-visible { } } -/* Trendy Glow Button */ -.trendy-glow-btn { +/* spence709-btn-1 start */ +.spence709-btn-1 { position: relative; padding: 18px 40px; font-size: 16px; @@ -2719,7 +2719,7 @@ a:focus-visible { box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); } -.trendy-glow-btn::before { +.spence709-btn-1::before { content: ''; position: absolute; top: 0; @@ -2731,7 +2731,7 @@ a:focus-visible { transition: opacity 0.4s ease; } -.trendy-glow-btn::after { +.spence709-btn-1::after { content: ''; position: absolute; top: -2px; @@ -2744,41 +2744,41 @@ a:focus-visible { z-index: -1; opacity: 0; transition: opacity 0.4s ease; - animation: glow-rotate 8s linear infinite; + animation: spence709-btn-1-glow 8s linear infinite; } -.trendy-glow-btn span { +.spence709-btn-1 span { position: relative; z-index: 1; transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); display: inline-block; } -.trendy-glow-btn:hover { +.spence709-btn-1:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 30px rgba(102, 126, 234, 0.6), 0 0 40px rgba(118, 75, 162, 0.4); } -.trendy-glow-btn:hover::before { +.spence709-btn-1:hover::before { opacity: 1; } -.trendy-glow-btn:hover::after { +.spence709-btn-1:hover::after { opacity: 1; filter: blur(20px); } -.trendy-glow-btn:hover span { +.spence709-btn-1:hover span { transform: scale(1.1); } -.trendy-glow-btn:active { +.spence709-btn-1:active { transform: translateY(-1px) scale(1.02); box-shadow: 0 4px 20px rgba(102, 126, 234, 0.5); } -@keyframes glow-rotate { +@keyframes spence709-btn-1-glow { 0% { background-position: 0% 50%; } @@ -2789,4 +2789,5 @@ a:focus-visible { background-position: 0% 50%; } } +/* spence709-btn-1 end */ diff --git a/index.html b/index.html index 0a2ace9..b1333c4 100644 --- a/index.html +++ b/index.html @@ -817,17 +817,17 @@ - +
- -
- Created by - spence709 -
+ +
+ Created by + spence709 +
- +