From 5ec026389484892fb78e54267f4ed71a5a881964 Mon Sep 17 00:00:00 2001 From: JackWebDev <33595694+jackwebdev@users.noreply.github.com> Date: Sun, 2 Oct 2022 10:40:10 +0100 Subject: [PATCH 001/111] Added a shiny-gradient button --- buttons/buttons.css | 35 +++++++++++++++++++++++++++++++++++ index.html | 3 +++ 2 files changed, 38 insertions(+) diff --git a/buttons/buttons.css b/buttons/buttons.css index fa7c182..ce2e730 100644 --- a/buttons/buttons.css +++ b/buttons/buttons.css @@ -256,6 +256,41 @@ a:focus-visible { animation: MoveUpInitial 0.2s forwards, MoveUpEnd 0.2s forwards 0.2s; } +.button--shiny-gradient { + color: #fff; + font-size: 1.4rem; + font-weight: 600; + border-radius: 0.8rem; + padding: 1.5rem 2.8rem; + background-color: rgb(110, 217, 249); + background: linear-gradient( + 165deg, + rgb(32, 114, 247) 20%, + rgb(110, 217, 249) 45%, + rgb(32, 114, 247) 80% + ); + background-size: 350%; + background-position: left; + box-shadow: + 0 0 0.2rem rgba(110, 217, 249, 0.8), + 0 0.2rem 0.8rem -0.2rem rgba(32, 114, 247, 0.8), + inset 0.5rem 0.5rem 0.5rem rgba(110, 217, 249, 0.6), + inset -0.5rem -0.5rem 0.5rem rgba(32, 114, 247, 0.6); + + transition: background-position 400ms ease-in-out, + box-shadow 600ms ease-in-out; + -webkit-transition: background-position 400ms ease-in-out, + -webkit-box-shadow 600ms ease-in-out; +} + +.button--shiny-gradient:hover { + background-position: right; + box-shadow: 0 0.5rem 2rem rgba(110, 217, 249, 0.8), + 0 2rem 2rem -2.5rem rgba(32, 114, 247, 0.8), + inset 0.6rem 0.6rem 0.6rem rgba(110, 217, 249, 0.8), + inset -0.6rem -0.6rem 0.6rem rgba(4, 86, 219, 0.8); + } + @keyframes MoveUpInitial { to { transform: translate3d(0,-105%,0); diff --git a/index.html b/index.html index 95c56ab..80dd722 100644 --- a/index.html +++ b/index.html @@ -55,6 +55,9 @@

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, ratione?

+
+ +
From 327923e84e61df4a38f57307fd72b8f3b2144a13 Mon Sep 17 00:00:00 2001 From: JackWebDev <33595694+jackwebdev@users.noreply.github.com> Date: Sun, 2 Oct 2022 10:55:42 +0100 Subject: [PATCH 002/111] Added a shiny-gradient button --- buttons/buttons.css | 74 ++++++++++++++++++++++++--------------------- 1 file changed, 39 insertions(+), 35 deletions(-) diff --git a/buttons/buttons.css b/buttons/buttons.css index 541d44e..061de23 100644 --- a/buttons/buttons.css +++ b/buttons/buttons.css @@ -93,41 +93,6 @@ a:focus-visible { animation: MoveUpInitial 0.2s forwards, MoveUpEnd 0.2s forwards 0.2s; } -.button--shiny-gradient { - color: #fff; - font-size: 1.4rem; - font-weight: 600; - border-radius: 0.8rem; - padding: 1.5rem 2.8rem; - background-color: rgb(110, 217, 249); - background: linear-gradient( - 165deg, - rgb(32, 114, 247) 20%, - rgb(110, 217, 249) 45%, - rgb(32, 114, 247) 80% - ); - background-size: 350%; - background-position: left; - box-shadow: - 0 0 0.2rem rgba(110, 217, 249, 0.8), - 0 0.2rem 0.8rem -0.2rem rgba(32, 114, 247, 0.8), - inset 0.5rem 0.5rem 0.5rem rgba(110, 217, 249, 0.6), - inset -0.5rem -0.5rem 0.5rem rgba(32, 114, 247, 0.6); - - transition: background-position 400ms ease-in-out, - box-shadow 600ms ease-in-out; - -webkit-transition: background-position 400ms ease-in-out, - -webkit-box-shadow 600ms ease-in-out; -} - -.button--shiny-gradient:hover { - background-position: right; - box-shadow: 0 0.5rem 2rem rgba(110, 217, 249, 0.8), - 0 2rem 2rem -2.5rem rgba(32, 114, 247, 0.8), - inset 0.6rem 0.6rem 0.6rem rgba(110, 217, 249, 0.8), - inset -0.6rem -0.6rem 0.6rem rgba(4, 86, 219, 0.8); - } - @keyframes MoveUpInitial { to { transform: translate3d(0,-105%,0); @@ -293,6 +258,45 @@ a:focus-visible { /* add your css of buttons from here */ +.button--shiny-gradient * { + font-family: Verdana, Geneva, sans-serif !important; + color: white; +} +.button--shiny-gradient { + font-size: 1.2rem; + font-weight: 600; + border: none; + border-radius: 0.8rem; + padding: 1.5rem 2.8rem; + background-color: rgb(110, 217, 249); + background: linear-gradient( + 165deg, + rgb(32, 114, 247) 20%, + rgb(110, 217, 249) 45%, + rgb(32, 114, 247) 80% + ); + background-size: 350%; + background-position: left; + box-shadow: + 0 0 0.2rem rgba(110, 217, 249, 0.8), + 0 0.2rem 0.8rem -0.2rem rgba(32, 114, 247, 0.8), + inset 0.5rem 0.5rem 0.5rem rgba(110, 217, 249, 0.6), + inset -0.5rem -0.5rem 0.5rem rgba(32, 114, 247, 0.6); + + transition: background-position 400ms ease-in-out, + box-shadow 600ms ease-in-out; + -webkit-transition: background-position 400ms ease-in-out, + -webkit-box-shadow 600ms ease-in-out; +} + +.button--shiny-gradient:hover { + background-position: right; + box-shadow: 0 0.5rem 2rem rgba(110, 217, 249, 0.8), + 0 2rem 2rem -2.5rem rgba(32, 114, 247, 0.8), + inset 0.6rem 0.6rem 0.6rem rgba(110, 217, 249, 0.8), + inset -0.6rem -0.6rem 0.6rem rgba(4, 86, 219, 0.8); + } + /* button-1 or name of button start */ /* css here */ /* button-1 or name of button end */ From 6dd0af9d0925c539d20cc73bab2a419f585081a6 Mon Sep 17 00:00:00 2001 From: Devraj Chatribin Date: Sun, 2 Oct 2022 17:30:30 +0530 Subject: [PATCH 003/111] Updated Design and README.md --- README.md | 53 ++++++++++++++++++++++++++++++++++------------------- 1 file changed, 34 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index 7335ea0..91795b6 100644 --- a/README.md +++ b/README.md @@ -1,32 +1,47 @@ -# custom-buttons -> A Collection of various hover effects for buttons made completely in HTML and CSS. +# CSS Buttons +> A collection of simple and subtle CSS-only hover animations for buttons. ✨ -Initial Design: -![buttons](https://user-images.githubusercontent.com/65373279/193439913-9c3f65e8-a1ce-4f65-ae75-bc4d398ca244.png) +[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg?style=flat)](https://github.com/Design-and-Code/css-buttons) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat)](https://github.com/Design-and-Code/css-buttons) +[![Open Source Love svg1](https://badges.frapsoft.com/os/v1/open-source.svg?v=103?style=flat)](https://github.com/Design-and-Code/css-buttons) +[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/Design-and-Code/css-buttons) +[![issues](https://img.shields.io/github/issues/Design-and-Code/css-buttons?color=6CC621)](https://github.com/Design-and-Code/css-buttons) +![Design](https://user-images.githubusercontent.com/65373279/193451212-96c59af4-ff8b-437a-b8da-c4d1ab4a1cc6.png) -# Some rule for Contribute +# Some rules to Contribute: -### Pls Follow name conversation for btn classes like btn-1/button-1 etc -### Do not change default btns maked as button-def classes +- Please follow naming convention for button classes. +- Do not change default buttons maked as ` button-def ` class. +- Do not change any code in `assets` folder. -# - -# How to add Buttons +# How to contribute by adding more buttons 1. Fork repo and clone it -2. open index.html file -3. write/past your buttons code there -4. and css files on buttons.css file -5. make sure other buttons does not change ( for that use proper name conversation ) +2. Add your HTML code in [index.html](https://github.com/Design-and-Code/css-buttons/blob/main/index.html) file +3. Add CSS code in [buttons.css](https://github.com/Design-and-Code/css-buttons/blob/main/buttons/buttons.css) file +4. Make sure you do not change other buttons code ( for that use proper name conversation ) #### Demo code ```html -
- - + -->
``` + +### Folder Structure + +``` +root +├── assets +│ ├── script.js +│ └── css +│ └── style.css +│ +├── buttons +│ └── buttons.css +└── index.html +``` From 39857afb87c02c400bafaa9ceb6001c9438552d7 Mon Sep 17 00:00:00 2001 From: Rajkumar Khistariya <83064473+Rajkumar-justcoder@users.noreply.github.com> Date: Sun, 2 Oct 2022 17:50:53 +0530 Subject: [PATCH 004/111] Some little point add --- README.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 91795b6..c756e83 100644 --- a/README.md +++ b/README.md @@ -13,14 +13,16 @@ - Please follow naming convention for button classes. - Do not change default buttons maked as ` button-def ` class. +- Do not change any code in `index.html` except button section. - Do not change any code in `assets` folder. # How to contribute by adding more buttons -1. Fork repo and clone it -2. Add your HTML code in [index.html](https://github.com/Design-and-Code/css-buttons/blob/main/index.html) file -3. Add CSS code in [buttons.css](https://github.com/Design-and-Code/css-buttons/blob/main/buttons/buttons.css) file -4. Make sure you do not change other buttons code ( for that use proper name conversation ) +1. Fork repo and clone it. +2. Add your HTML code in [index.html](https://github.com/Design-and-Code/css-buttons/blob/main/index.html) file. +3. Add CSS code in [buttons.css](https://github.com/Design-and-Code/css-buttons/blob/main/buttons/buttons.css) file. +4. Make sure you do not change other buttons code ( for that use proper name conversation ). +5. While opening PR full screenshort. #### Demo code ```html From 0ed2f02a3aaafe65284f9954ef051013ab34346a Mon Sep 17 00:00:00 2001 From: Rajkumar Khistariya <83064473+Rajkumar-justcoder@users.noreply.github.com> Date: Sun, 2 Oct 2022 18:02:39 +0530 Subject: [PATCH 005/111] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c756e83..a1fe1d8 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ ```html
From 9b943a54ceffb616d98188b77c551a22c97996f3 Mon Sep 17 00:00:00 2001 From: lostgirljourney Date: Sun, 2 Oct 2022 21:43:11 +0530 Subject: [PATCH 006/111] formatters --- .editorconfig | 20 ++++++++++++++++++++ .prettierrc | 6 ++++++ 2 files changed, 26 insertions(+) create mode 100644 .editorconfig create mode 100644 .prettierrc diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..bad7555 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,20 @@ +root = true + +[*] +charset = utf-8 +end_of_line = crlf +indent_size = 2 +insert_final_newline = false +indent_style = tab +trim_trailing_whitespace = true + +[*.json] +indent_size = 2 + +[*.yml] +indent_size = 2 +indent_style = space + +[*.md] +indent_size = 2 +indent_style = space \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..936c6b0 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,6 @@ +{ + "trailingComma": "none", + "tabWidth": 2, + "semi": true, + "singleQuote": true +} From be56e6267ccff896016fab80162c120f91d8729d Mon Sep 17 00:00:00 2001 From: Rhysha Kachari Date: Mon, 3 Oct 2022 16:28:09 +0530 Subject: [PATCH 007/111] Added Button - 8 --- buttons/buttons.css | 58 +++++++++++++++++++++++++++++++++++++++++++++ index.html | 8 +++++++ 2 files changed, 66 insertions(+) diff --git a/buttons/buttons.css b/buttons/buttons.css index 55d84a8..cab3843 100644 --- a/buttons/buttons.css +++ b/buttons/buttons.css @@ -314,3 +314,61 @@ a:focus-visible { inset -0.6rem -0.6rem 0.6rem rgba(4, 86, 219, 0.8); } + .button-8 { + width: 220px; + height: 50px; + border: none; + outline: none; + color: #fff; + background: #111; + cursor: pointer; + position: relative; + z-index: 0; + border-radius: 10px; +} + .button-8:before { + content: ''; + background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); + position: absolute; + top: -2px; + left:-2px; + background-size: 400%; + z-index: -1; + filter: blur(5px); + width: calc(100% + 4px); + height: calc(100% + 4px); + animation: glowing 20s linear infinite; + opacity: 0; + transition: opacity .3s ease-in-out; + border-radius: 10px; +} + +.button-8:active { + color: #000 +} + +.button-8:active:after { + background: transparent; +} + +.button-8:hover:before { + opacity: 1; +} + +.button-8:after { + z-index: -1; + content: ''; + position: absolute; + width: 100%; + height: 100%; + background: #111; + left: 0; + top: 0; + border-radius: 10px; +} + +@keyframes glowing { + 0% { background-position: 0 0; } + 50% { background-position: 400% 0; } + 100% { background-position: 0 0; } +} \ No newline at end of file diff --git a/index.html b/index.html index 138d6b4..eb1c126 100644 --- a/index.html +++ b/index.html @@ -80,7 +80,15 @@ + + +
+ +
+ + +