diff --git a/3d-boxes-background/index.html b/3d-boxes-background/index.html
index 94bfc1f..aba2e37 100644
--- a/3d-boxes-background/index.html
+++ b/3d-boxes-background/index.html
@@ -1,20 +1,21 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
-      integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
-      crossorigin="anonymous"
-    />
-    <link rel="stylesheet" href="style.css" />
-    <title>3D Boxes Background</title>
-  </head>
-  <body>
-    <button id="btn" class="magic">Magic 🎩</button>
-    <div id="boxes" class="boxes big"></div>
-    <script src="script.js"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
+    integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
+    crossorigin="anonymous" />
+  <link rel="stylesheet" href="style.css" />
+  <title>3D Boxes Background</title>
+</head>
+
+
+<body>
+  <button id="btn" class="magic">Magic 🎩</button>
+  <div id="boxes" class="boxes big"></div>
+  <script src="script.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/3d-boxes-background/script.js b/3d-boxes-background/script.js
index 4f48d7a..d74c76c 100644
--- a/3d-boxes-background/script.js
+++ b/3d-boxes-background/script.js
@@ -1,7 +1,9 @@
 const boxesContainer = document.getElementById('boxes')
 const btn = document.getElementById('btn')
 
-btn.addEventListener('click', () => boxesContainer.classList.toggle('big'))
+btn.addEventListener('click', () => {
+  boxesContainer.classList.toggle('big')
+})
 
 function createBoxes() {
   for (let i = 0; i < 4; i++) {
@@ -14,4 +16,4 @@ function createBoxes() {
   }
 }
 
-createBoxes()
+createBoxes();
diff --git a/3d-boxes-background/style.css b/3d-boxes-background/style.css
index 1ab38a8..70336ee 100644
--- a/3d-boxes-background/style.css
+++ b/3d-boxes-background/style.css
@@ -13,6 +13,7 @@ body {
   justify-content: center;
   height: 100vh;
   overflow: hidden;
+  border: 2px solid black;
 }
 
 .magic {
diff --git a/animated-countdown/style.css b/animated-countdown/style.css
index 8ea1c73..02cb042 100644
--- a/animated-countdown/style.css
+++ b/animated-countdown/style.css
@@ -125,7 +125,7 @@ h4 {
   }
 }
 
-#replay{
+/* #replay{
   background-color: #3498db;
   border-radius: 3px;
   border: none;
@@ -160,4 +160,56 @@ h4 {
 #replay:hover span:after{
   opacity: 1;
   right: 0;
+} */
+
+button{
+  border: none;
+  padding: 5px 30px;
+  transform-origin: left;
+  font-size: 1.2rem;
+  transition: 1s;
+  cursor: pointer;
+  position: relative;
+  background: none;
+  color: aliceblue;
+  border-radius: 10px;
+}
+
+
+
+button::before{
+  position: absolute;
+  content: '';
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  left: 0;
+  top: 0;
+  transform: scaleX(37%);
+  background-color: #3498db;
+  transform-origin: left;
+  transition: 1s;
+  opacity: 40%;
+  border-radius: 10px;
 }
+button:hover::before{
+  transform: scaleX(1);
+}
+
+button::after{
+  position: absolute;
+  content: '';
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  left: 0;
+  top: 0;
+  transform-origin: left;
+  transform: scaleX(44%);
+  border-radius: 10px;
+  border-bottom: 2px solid rgb(42, 58, 107);
+  transition: 1s;
+}
+button:hover::after{
+  transform: scaleX(1);
+}
\ No newline at end of file
