Merge pull request #102 from SalehaTabassum/Buttons

Fixed Issue- #22 : Improving buttons

index.html

@@ -107,12 +107,14 @@
 	<div id="home"
 		style="background-image: url(https://i.pinimg.com/originals/e6/c9/e3/e6c9e3d891aa56637847ba09c28fa00c.jpg); background-size: cover;">
 		<div id="homecontent">
-			<h1 class="focusin" style="padding-top: 190px;">Physi-c<br>Tech</h1>
+			<h1 class="focusin" style="padding-top: 150px;">Physi-c<br>Tech</h1>
+			<div class="buttons">
 			<span id="playbutton" class="btn" onclick="play()">PLAY</span><br>
 			<span id="newgamebutton" class="btn" onclick="newgame()">NEW GAME</span><br>
 			<span id="soundbutton" class="btn" onclick="toggleSound()">SOUND ON</span><br>
 			<span class="btn" onclick="window.location.href='about.html'">ABOUT</span><br>
 		</div>
+		</div>
 
 
 	</div>

style.css

@@ -320,9 +320,59 @@ button {
     text-transform: uppercase;
 }
 
-.btn {
+.buttons{
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+  }
+
+  .buttons .btn {
+    position: relative;
+    width:140px;
+    height:20px;
     cursor: pointer;
-}
+    padding:17px;
+    align-items: center;
+    background: none;
+    border: none;
+    color: #fff;
+    font-weight: 500;
+    font-size: 18px;
+
+  }
+  .buttons .btn::before,
+  .buttons .btn::after{
+    position: absolute;
+    content: '';
+    top:0;
+    left: 0;
+    width:100%;
+    height: 100%;
+    backdrop-filter:blur(15px);
+    background: rgba(253, 251, 251, 0.049);
+    border-radius: 10px;
+    box-shadow: 20px 20px 50px rgba(74, 65, 57, 0.5);
+    z-index: -2;
+  }
+  .buttons .btn::after{
+    width: 110%;
+    height: 90%;
+    top:25%;
+    left:-5%;
+    z-index: -3;
+    transform: scaleX(0.5);
+    transition: all 0.6s;
+    background: linear-gradient(135deg,#f47f0a,#ff045c);
+  }
+
+
+  .buttons .btn:hover:after{
+    transform: scaleX(1.01) translateY(-15px);
+  }
+
 
 .movie {
     border: 4px solid #000;