Added Skeuomorphism Button (#581)

Rakesh9100 · Feb 18, 2024 · bccba38 · bccba38
1 parent 2d936f3
commit bccba38
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 0 deletions.
diff --git a/Components/Buttons/Skeuomorphism-Button/index.html b/Components/Buttons/Skeuomorphism-Button/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <!--=============== BOXICONS ===============-->
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css"
+    />
+
+    <!--=============== CSS ===============-->
+    <link rel="stylesheet" href="styles.css" />
+
+    <title>Skeuomorphism button</title>
+  </head>
+  <body>
+    <label>
+      <input type="checkbox" class="skeuo__switch" />
+      <div class="skeuo__button">
+        <i class="bx bx-circle skeuo__circle"></i>
+        <i class="bx bx-minus skeuo__line"></i>
+      </div>
+    </label>
+  </body>
+</html>
diff --git a/Components/Buttons/Skeuomorphism-Button/styles.css 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
@@ -371,6 +371,21 @@ <h1>Swipe Right Button</h1>
                     </a>
                 </div>
             </div>
+            <div class="box">
+                <h1>Skeuomorphism Button</h1>
+                <div class="preview">
+                    <a href="../../Components/Buttons/Skeuomorphism-Button/index.html" title="Live Preview"
+                        target="_blank">
+                        <img src="../images/link.png">
+                    </a>
+                </div>
+                <div class="source">
+                    <a href="https://github.com/Rakesh9100/Beautiify/tree/main/Components/Buttons/Skeuomorphism-Button"
+                        title="Source Code" target="_blank">
+                        <img src="../images/github.png">
+                    </a>
+                </div>
+            </div>
         </div>
     </section>