Shreyash 🍉

3 years ago · d64e74ca09
parent 9aafd7870d
commit d64e74ca09
4 changed files with 77 additions and 21 deletions
--- 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>
+
+<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>
--- 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();
--- 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 {
--- 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);
 }