diff --git a/100_projects/21-background-color-change/index.html b/100_projects/21-background-color-change/index.html
new file mode 100644
index 0000000..81d2205
--- /dev/null
+++ b/100_projects/21-background-color-change/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+ Background Color
+
+
+
+
+
+
+
diff --git a/100_projects/21-background-color-change/script.js b/100_projects/21-background-color-change/script.js
new file mode 100644
index 0000000..5c52880
--- /dev/null
+++ b/100_projects/21-background-color-change/script.js
@@ -0,0 +1,8 @@
+const btn = document.getElementById("btn");
+
+btn.addEventListener("click", () => {
+ document.body.style.background = randomBg();
+});
+function randomBg() {
+ return `hsl(${Math.floor(Math.random() * 360)}, 100%, 50%)`;
+}
\ No newline at end of file
diff --git a/100_projects/21-background-color-change/style.css b/100_projects/21-background-color-change/style.css
new file mode 100644
index 0000000..ab75cb3
--- /dev/null
+++ b/100_projects/21-background-color-change/style.css
@@ -0,0 +1,31 @@
+* {
+ box-sizing: border-box;
+}
+body {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 0;
+ min-height: 100vh;
+}
+button {
+ background:rgba(0, 0, 0, 0.4);
+ backdrop-filter: blur(10px);
+ color: white;
+ padding: 1rem;
+ font-size: 1.2rem;
+ box-shadow:
+ 5px 5px 6px rgba(0, 0, 0, 0.3),
+ -5px -5px 6px rgba(0, 0, 0, 0.3);
+ border-radius: 5px;
+ border: none;
+ transition: transform 0.1s linear;
+ cursor: pointer;
+}
+button:focus {
+ outline: none;
+}
+button:active {
+ box-shadow: 0;
+ transform: translate(2px, 2px);
+}
\ No newline at end of file