From b86fb9fb176b05bff9d40af4352aa81c5aba5656 Mon Sep 17 00:00:00 2001 From: Shubh Date: Fri, 16 Feb 2024 22:49:58 +0530 Subject: [PATCH 1/5] changed file updated --- .../Buttons/skeuomorphism-button/index.html | 27 + .../Buttons/skeuomorphism-button/styles.css | 57 ++ .../Buttons/skeuomorphism-button/styles.scss | 56 ++ assets/html_files/buttons.html | 903 +++++++++++------- 4 files changed, 683 insertions(+), 360 deletions(-) create mode 100644 Components/Buttons/skeuomorphism-button/index.html create mode 100644 Components/Buttons/skeuomorphism-button/styles.css create mode 100644 Components/Buttons/skeuomorphism-button/styles.scss diff --git a/Components/Buttons/skeuomorphism-button/index.html b/Components/Buttons/skeuomorphism-button/index.html new file mode 100644 index 00000000..9db013cb --- /dev/null +++ b/Components/Buttons/skeuomorphism-button/index.html @@ -0,0 +1,27 @@ + + + + + + + + + + + + + Skeuomorphism button + + + + + diff --git a/Components/Buttons/skeuomorphism-button/styles.css b/Components/Buttons/skeuomorphism-button/styles.css new file mode 100644 index 00000000..ddff2a00 --- /dev/null +++ b/Components/Buttons/skeuomorphism-button/styles.css @@ -0,0 +1,57 @@ +/*=============== SKEUOMORPHISM BUTTON ===============*/ +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + display: grid; + place-items: center; + background: #26272c; +} + +.skeuo__switch { + display: none; +} + +.skeuo__button { + width: 6rem; + background: linear-gradient(90deg, #444650 0%, #101113 100%); + padding: 0.75rem 1.25rem 0.75rem 1rem; + border-radius: 3rem; + box-shadow: inset -2px 0 18px #212227, inset -14px 0 6px #43454f, + inset 4px 0 6px #151619; + cursor: pointer; + display: flex; + justify-content: space-between; + align-items: center; + transition: 0.2s; +} + +.skeuo__circle { + font-size: 18px; + color: #5ccc9d; +} + +.skeuo__line { + transform: rotate(90deg); + font-size: 22px; + color: #9699a6; +} + +/* Button animation effects */ +.skeuo__switch:checked ~ .skeuo__button { + background: linear-gradient(90deg, #101113 0%, #444650 100%); + box-shadow: inset -2px 0 18px #212227, inset -4px 0 6px #151619, + inset 14px 0 6px #43454f; + padding: 0.75rem 1rem 0.75rem 1.25rem; +} + +.skeuo__switch:checked ~ .skeuo__button .skeuo__circle { + font-size: 20px; +} + +.skeuo__switch:checked ~ .skeuo__button .skeuo__line { + font-size: 18px; +} diff --git a/Components/Buttons/skeuomorphism-button/styles.scss b/Components/Buttons/skeuomorphism-button/styles.scss new file mode 100644 index 00000000..9881d36a --- /dev/null +++ b/Components/Buttons/skeuomorphism-button/styles.scss @@ -0,0 +1,56 @@ +/*=============== SKEUOMORPHISM BUTTON ===============*/ +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + display: grid; + place-items: center; + background: #26272c; +} + +.skeuo { + &__switch { + display: none; + } + &__button { + width: 6rem; + background: linear-gradient(90deg, #444650 0%, #101113 100%); + padding: 0.75rem 1.25rem 0.75rem 1rem; + border-radius: 3rem; + box-shadow: inset -2px 0 18px #212227, inset -14px 0 6px #43454f, + inset 4px 0 6px #151619; + cursor: pointer; + display: flex; + justify-content: space-between; + align-items: center; + transition: 0.2s; + } + &__circle { + font-size: 18px; + color: #5ccc9d; + } + &__line { + transform: rotate(90deg); + font-size: 22px; + color: #9699a6; + } +} + +/* Button animation effects */ +.skeuo { + &__switch:checked ~ .skeuo__button { + background: linear-gradient(90deg, #101113 0%, #444650 100%); + box-shadow: inset -2px 0 18px #212227, inset -4px 0 6px #151619, + inset 14px 0 6px #43454f; + padding: 0.75rem 1rem 0.75rem 1.25rem; + } + &__switch:checked ~ .skeuo__button .skeuo__circle { + font-size: 20px; + } + &__switch:checked ~ .skeuo__button .skeuo__line { + font-size: 18px; + } +} diff --git a/assets/html_files/buttons.html b/assets/html_files/buttons.html index fc456f39..0e096a09 100644 --- a/assets/html_files/buttons.html +++ b/assets/html_files/buttons.html @@ -1,391 +1,574 @@ - - + - + - + - + - + Beautiify | Buttons - + - +
-
-
-
+
+
+
-
+ - - -
Buttons
- -
- +
- 🠕 + 🠕
- - - + From 0f463846d5ef47111d137264de2dfdf079fb3411 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sun, 18 Feb 2024 13:03:16 +0530 Subject: [PATCH 2/5] Update buttons.html --- assets/html_files/buttons.html | 918 ++++++++++++++------------------- 1 file changed, 375 insertions(+), 543 deletions(-) diff --git a/assets/html_files/buttons.html b/assets/html_files/buttons.html index 0e096a09..3c73b5bc 100644 --- a/assets/html_files/buttons.html +++ b/assets/html_files/buttons.html @@ -1,574 +1,406 @@ - + + - + - + - + - + Beautiify | Buttons - + - +
-
-
-
+
+
+
-
- -
Buttons
- - -
-
-

Glassmorphism Button

-
- - - -
-
- - - -
-
-
-

Neon Button

-
- - - -
-
- - - -
-
-
-

Toggle Button

-
- - - -
-
- - - -
-
-
-

Gradient Button

-
- - - -
-
- - - -
-
-
-

Glow Button

-
- - - -
-
- - - -
-
-
-

Jelly Button

-
- - - -
-
- - - -
-
-
-

Flipside Button

-
- - - -
-
- - - -
-
-
-

Liquid Button

-
- - - -
-
- - - -
-
-
-

Hover Button

-
- - - -
-
- - - -
-
-
-

Neumorphic Button

-
- - - -
-
- - - -
-
-
-

3D Button

-
- - - -
-
- - - -
-
-
-

Mask Hover Button

-
- - - -
-
- - - -
-
-
-

Delete Animation Button

-
- - - -
-
- - - -
-
-
-

Prespective Button

-
- - - -
-
- - - -
-
-
-

Hover Animation Button

-
- - - -
-
- - - -
-
-
-

Glow Up Button

-
- - - -
-
- - - -
-
-
-

Wiggle Button

-
- - - -
-
- - - -
-
-
-

Blob Button

-
- - - -
-
- - - -
-
-
-

Thin Button

-
- - - -
-
- - - -
-
-
-

Rainbow Animation Button

-
- - - -
-
- - - -
-
-
-

Swipe Right Button

-
- - - -
-
- - - -
+ + +
Buttons
+ + -
-

Skeuomorphism Button

-
- - - -
-
- - - -
+
+
+

Glassmorphism Button

+
+ + + +
+
+ + + +
+
+
+

Neon Button

+
+ + + +
+
+ + + +
+
+
+

Toggle Button

+
+ + + +
+
+ + + +
+
+
+

Gradient Button

+
+ + + +
+
+ + + +
+
+
+

Glow Button

+
+ + + +
+
+ + + +
+
+
+

Jelly Button

+
+ + + +
+
+ + + +
+
+
+

Flipside Button

+
+ + + +
+
+ + + +
+
+
+

Liquid Button

+
+ + + +
+
+ + + +
+
+
+

Hover Button

+
+ + + +
+
+ + + +
+
+
+

Neumorphic Button

+
+ + + +
+
+ + + +
+
+
+

3D Button

+
+ + + +
+
+ + + +
+
+
+

Mask Hover Button

+
+ + + +
+
+ + + +
+
+
+

Delete Animation Button

+
+ + + +
+
+ + + +
+
+
+

Prespective Button

+
+ + + +
+
+ + + +
+
+
+

Hover Animation Button

+
+ + + +
+
+ + + +
+
+
+

Glow Up Button

+
+ + + +
+
+ + + +
+
+
+

Wiggle Button

+
+ + + +
+
+ + + +
+
+
+

Blob Button

+
+ + + +
+
+ + + +
+
+
+

Thin Button

+
+ + + +
+
+ + + +
+
+
+

Rainbow Animation Button

+
+ + + +
+
+ + + +
+
+
+

Swipe Right Button

+
+ + + +
+
+ + + +
+
+
+

Skeuomorphism Button

+
+ + + +
+
+ + + +
+
-
- +
- 🠕 + 🠕
- + + + From 8d1dfc86f3b52bf25939727da0cbdb4fb7c56c3c Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sun, 18 Feb 2024 13:06:51 +0530 Subject: [PATCH 3/5] Update and rename index.html to index.html --- .../{skeuomorphism-button => Skeuomorphism-Button}/index.html | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename Components/Buttons/{skeuomorphism-button => Skeuomorphism-Button}/index.html (100%) diff --git a/Components/Buttons/skeuomorphism-button/index.html b/Components/Buttons/Skeuomorphism-Button/index.html similarity index 100% rename from Components/Buttons/skeuomorphism-button/index.html rename to Components/Buttons/Skeuomorphism-Button/index.html From 41cb520180ceb197ef0505fa2beb7b2fae21b344 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sun, 18 Feb 2024 13:07:11 +0530 Subject: [PATCH 4/5] Update and rename styles.css to styles.css --- .../{skeuomorphism-button => Skeuomorphism-Button}/styles.css | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename Components/Buttons/{skeuomorphism-button => Skeuomorphism-Button}/styles.css (100%) diff --git a/Components/Buttons/skeuomorphism-button/styles.css b/Components/Buttons/Skeuomorphism-Button/styles.css similarity index 100% rename from Components/Buttons/skeuomorphism-button/styles.css rename to Components/Buttons/Skeuomorphism-Button/styles.css From 5c3eb67b30c1e731295ab3e84c14c97cc08a6fda Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sun, 18 Feb 2024 13:07:19 +0530 Subject: [PATCH 5/5] Delete Components/Buttons/skeuomorphism-button/styles.scss --- .../Buttons/skeuomorphism-button/styles.scss | 56 ------------------- 1 file changed, 56 deletions(-) delete mode 100644 Components/Buttons/skeuomorphism-button/styles.scss diff --git a/Components/Buttons/skeuomorphism-button/styles.scss b/Components/Buttons/skeuomorphism-button/styles.scss deleted file mode 100644 index 9881d36a..00000000 --- a/Components/Buttons/skeuomorphism-button/styles.scss +++ /dev/null @@ -1,56 +0,0 @@ -/*=============== SKEUOMORPHISM BUTTON ===============*/ -* { - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - display: grid; - place-items: center; - background: #26272c; -} - -.skeuo { - &__switch { - display: none; - } - &__button { - width: 6rem; - background: linear-gradient(90deg, #444650 0%, #101113 100%); - padding: 0.75rem 1.25rem 0.75rem 1rem; - border-radius: 3rem; - box-shadow: inset -2px 0 18px #212227, inset -14px 0 6px #43454f, - inset 4px 0 6px #151619; - cursor: pointer; - display: flex; - justify-content: space-between; - align-items: center; - transition: 0.2s; - } - &__circle { - font-size: 18px; - color: #5ccc9d; - } - &__line { - transform: rotate(90deg); - font-size: 22px; - color: #9699a6; - } -} - -/* Button animation effects */ -.skeuo { - &__switch:checked ~ .skeuo__button { - background: linear-gradient(90deg, #101113 0%, #444650 100%); - box-shadow: inset -2px 0 18px #212227, inset -4px 0 6px #151619, - inset 14px 0 6px #43454f; - padding: 0.75rem 1rem 0.75rem 1.25rem; - } - &__switch:checked ~ .skeuo__button .skeuo__circle { - font-size: 20px; - } - &__switch:checked ~ .skeuo__button .skeuo__line { - font-size: 18px; - } -}