diff --git a/index.html b/index.html
new file mode 100644
index 0000000..df62ae6
--- /dev/null
+++ b/index.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+ Rolling Button
+
+
+
+
+
+
\ No newline at end of file
diff --git a/styles/style.css b/styles/style.css
new file mode 100644
index 0000000..ad4266c
--- /dev/null
+++ b/styles/style.css
@@ -0,0 +1,74 @@
+*,
+:before,
+:after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #e0e0e0;
+}
+
+.toggle {
+ width: 150px;
+ height: 50px;
+ position: relative;
+}
+
+input[type=checkbox] {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ border-radius: 30px;
+ box-shadow: 10px 10px 20px 0 rgba(0, 0, 0, 0.2), -10px -10px 20px 0 rgba(255, 255, 255, 0.5);
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ cursor: pointer;
+ transition: all 500ms ease-in-out;
+ outline: none;
+}
+
+.circle {
+ position: absolute;
+ width: 45px;
+ height: 45px;
+ top: 50%;
+ left: 5px;
+ transform: translateY(-50%);
+ border-radius: 50%;
+ background-color: #fff;
+ box-shadow: 1px 1px 10px 0 dodgerblue inset, -5px -5px 20px 0 dodgerblue inset;
+ transition: all 750ms ease-in-out;
+ pointer-events: none;
+}
+
+.circle:before {
+ content: "ON";
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ font-family: monospace;
+ font-size: 1.15rem;
+}
+
+.toggle-1:checked {
+ box-shadow: inset 6px 6px 10px 0 rgba(0, 0, 0, 0.2), inset -6px -6px 10px 0 rgba(255, 255, 255, 0.5);
+}
+
+.toggle-1:checked ~ .circle {
+ box-shadow: 1px 1px 10px 0 rebeccapurple inset, -5px -5px 20px 0 rebeccapurple inset;
+ background-color: #fff;
+ left: 100px;
+ transform: translateY(-50%) rotate(360deg);
+}
+
+.toggle-1:checked ~ .circle:before {
+ content: "OFF";
+}/*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/styles/style.css.map b/styles/style.css.map
new file mode 100644
index 0000000..ad4c68f
--- /dev/null
+++ b/styles/style.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;;;EAGE,SAAA;EACA,UAAA;EACA,sBAAA;ACCF;;ADEA;EACE,aAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,yBAAA;ACCF;;ADEA;EACE,YAAA;EACA,YAAA;EACA,kBAAA;ACCF;;ADEA;EACE,kBAAA;EACA,WAAA;EACA,YAAA;EACA,mBAAA;EACA,4FAAA;EAEA,wBAAA;KAAA,qBAAA;UAAA,gBAAA;EACA,eAAA;EACA,iCAAA;EACA,aAAA;ACAF;;ADGA;EACE,kBAAA;EACA,WAAA;EACA,YAAA;EACA,QAAA;EACA,SAAA;EACA,2BAAA;EACA,kBAAA;EACA,sBAAA;EACA,8EAAA;EACA,iCAAA;EACA,oBAAA;ACAF;;ADGA;EACE,aAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;EACA,sBAAA;EACA,kBAAA;ACAF;;ADGA;EACE,oGAAA;ACAF;;ADIA;EACE,oFAAA;EACA,sBAAA;EACA,WAAA;EACA,0CAAA;ACDF;;ADIA;EACE,cAAA;ACDF","file":"style.css"}
\ No newline at end of file
diff --git a/styles/style.scss b/styles/style.scss
new file mode 100644
index 0000000..2a97e01
--- /dev/null
+++ b/styles/style.scss
@@ -0,0 +1,74 @@
+*,
+:before,
+:after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #e0e0e0;
+}
+
+.toggle {
+ width: 150px;
+ height: 50px;
+ position: relative;
+}
+
+input[type="checkbox"] {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ border-radius: 30px;
+ box-shadow: 10px 10px 20px 0 rgba(0, 0, 0, 0.2),
+ -10px -10px 20px 0 rgba(255, 255, 255, 0.5);
+ appearance: none;
+ cursor: pointer;
+ transition: all 500ms ease-in-out;
+ outline: none;
+}
+
+.circle {
+ position: absolute;
+ width: 45px;
+ height: 45px;
+ top: 50%;
+ left: 5px;
+ transform: translateY(-50%);
+ border-radius: 50%;
+ background-color: #fff;
+ box-shadow: 1px 1px 10px 0 dodgerblue inset, -5px -5px 20px 0 dodgerblue inset;
+ transition: all 750ms ease-in-out;
+ pointer-events: none;
+}
+
+.circle:before {
+ content: "ON";
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ font-family: monospace;
+ font-size: 1.15rem;
+}
+
+.toggle-1:checked {
+ box-shadow: inset 6px 6px 10px 0 rgba(0, 0, 0, 0.2),
+ inset -6px -6px 10px 0 rgba(255, 255, 255, 0.5);
+}
+
+.toggle-1:checked ~ .circle {
+ box-shadow: 1px 1px 10px 0 rebeccapurple inset, -5px -5px 20px 0 rebeccapurple inset;
+ background-color: #fff;
+ left: 100px;
+ transform: translateY(-50%) rotate(360deg);
+}
+
+.toggle-1:checked ~ .circle:before {
+ content: "OFF";
+}
\ No newline at end of file