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/assets/html_files/buttons.html b/assets/html_files/buttons.html
index fc456f39..3c73b5bc 100644
--- a/assets/html_files/buttons.html
+++ b/assets/html_files/buttons.html
@@ -371,6 +371,21 @@ Swipe Right Button
+
+
Skeuomorphism Button
+
+
+
+
+ 
+
+