Merge pull request Spyware007#2063 from medakshchoudhary/medakshchoud…

…hary Added a button
samarthsarvade · Oct 11, 2023 · e7ebdbf · e7ebdbf
2 parents ddedaf4 + 7dfbe3c
commit e7ebdbf
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 0 deletions.
diff --git a/public/Buttons/medakshchoudhary_1/index.html b/public/Buttons/medakshchoudhary_1/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <label class="switch">
+        <input type="checkbox">
+        <span class="slider"></span>
+    </label>
+</body>
+</html>
diff --git a/public/Buttons/medakshchoudhary_1/style.css b/public/Buttons/medakshchoudhary_1/style.css
@@ -0,0 +1,51 @@
+/* The switch - the box around the slider */
+.switch {
+    font-size: 17px;
+    position: relative;
+    display: inline-block;
+    width: 3.5em;
+    height: 2em;
+  }
+
+  /* Hide default HTML checkbox */
+  .switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  /* The slider */
+  .slider {
+    --background: #28096b;
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--background);
+    transition: .5s;
+    border-radius: 30px;
+  }
+
+  .slider:before {
+    position: absolute;
+    content: "";
+    height: 1.4em;
+    width: 1.4em;
+    border-radius: 50%;
+    left: 10%;
+    bottom: 15%;
+    box-shadow: inset 8px -4px 0px 0px #fff000;
+    background: var(--background);
+    transition: .5s;
+  }
+
+  input:checked + .slider {
+    background-color: #522ba7;
+  }
+
+  input:checked + .slider:before {
+    transform: translateX(100%);
+    box-shadow: inset 15px -4px 0px 15px #fff000;
+  }