diff --git a/buttons/buttons.css b/buttons/buttons.css index d3dc362..30c2ae9 100644 --- a/buttons/buttons.css +++ b/buttons/buttons.css @@ -2703,3 +2703,91 @@ a:focus-visible { } } +/* spence709-btn-1 start */ +.spence709-btn-1 { + 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); +} + +.spence709-btn-1::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; +} + +.spence709-btn-1::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: spence709-btn-1-glow 8s linear infinite; +} + +.spence709-btn-1 span { + position: relative; + z-index: 1; + transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); + display: inline-block; +} + +.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); +} + +.spence709-btn-1:hover::before { + opacity: 1; +} + +.spence709-btn-1:hover::after { + opacity: 1; + filter: blur(20px); +} + +.spence709-btn-1:hover span { + transform: scale(1.1); +} + +.spence709-btn-1:active { + transform: translateY(-1px) scale(1.02); + box-shadow: 0 4px 20px rgba(102, 126, 234, 0.5); +} + +@keyframes spence709-btn-1-glow { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} +/* spence709-btn-1 end */ + diff --git a/index.html b/index.html index a8dbf87..b1333c4 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 +
+
+ + + + + + +