diff --git a/index.html b/index.html
index f02b025..277861a 100644
--- a/index.html
+++ b/index.html
@@ -7,12 +7,12 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
 
   <title>Online Debate System</title>
-  
+
   <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
-  
+
       <style>
-      html { 
-  background: url(img/debate.jpg) no-repeat center center fixed ; 
+      html {
+  background: url(img/debate.jpg) no-repeat center center fixed ;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
@@ -23,7 +23,7 @@
 body{
   overflow: none;
 }
-     
+
 *{
   margin:0;
   padding:0;
@@ -68,7 +68,7 @@
   position:relative;
   font-size:30px;
   overflow:hidden;
-  
+
 }
 .subText p{
   height:100%;
@@ -99,9 +99,9 @@
   margin:auto;
   opacity:0;
   border:none;
-  
+
   transition:all .5s;
-  
+
 
 }
 
@@ -116,28 +116,69 @@
 }
 
 input:focus{outline:none;}
-
-.button{
-  width:auto;
-  height:100%;
-  float:center;
-  margin:auto;
+.button {
+  margin-top: 35px;
+  min-width: 300px;
+  min-height: 60px;
+  font-family: 'Nunito', sans-serif;
+  font-size: 22px;
+  text-transform: uppercase;
+  letter-spacing: 1.3px;
+  font-weight: 700;
+  color: #313133;
+  background: #4FD1C5;
+background: linear-gradient(90deg, rgba(129,230,217,1) 0%, rgba(79,209,197,1) 100%);
+  border: none;
+  border-radius: 1000px;
+  box-shadow: 12px 12px 24px rgba(79,209,197,.64);
+  transition: all 0.3s ease-in-out 0s;
+  cursor: pointer;
+  outline: none;
+  position: relative;
   padding: 10px;
-  border:2px solid #777;;
-  border-radius:50px;
-  font-size:24px;
-  background:red;
-  background-color: #49afcd;
-  background-image:linear-gradient(top, #5bc0de, #2f96b4);
-  cursor:pointer;
-  transition:all .5s;
+  }
+
+button::before {
+content: '';
+  border-radius: 1000px;
+  min-width: calc(300px + 12px);
+  min-height: calc(60px + 12px);
+  border: 6px solid #00FFCB;
+  box-shadow: 0 0 60px rgba(0,255,203,.64);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  transition: all .3s ease-in-out 0s;
+}
+
+.button:hover, .button:focus {
+  color: #313133;
+  transform: translateY(-6px);
+}
+
+button:hover::before, button:focus::before {
+  opacity: 1;
 }
 
-.button:hover{
-  background: #2f96b4;
-  box-shadow:inset 0 1px 5px rgba(0,0,0,.3);
+button::after {
+  content: '';
+  width: 30px; height: 30px;
+  border-radius: 100%;
+  border: 6px solid #00FFCB;
+  position: absolute;
+  z-index: -1;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  animation: ring 1.5s infinite;
 }
 
+button:hover::after, button:focus::after {
+  animation: none;
+  display: none;
+}
 /*footer-follow us*/
 .follow{
   width:100%;
@@ -164,7 +205,7 @@
   .button{font-size:12px}
 
 }
- 
+
 @media screen and (max-width:600px){
   .welcome,.subText,.sub{background:rgba(255,255,255,.3);}
   .welcome{border-radius:20px 20px 0 0;}
@@ -212,20 +253,20 @@ <h1 class="greet">WELCOME</h1>
        </div>
     </div>
   </div>
-  
+
   <div class="form">
     <form class="sub">
       <center><a href="speech.php"><button class="button" value="Send"><a href="speech.php">Start</a></button></a></center>
     </form>
   </div>
-  
+
   <div class="social">
     <div class="follow">
       <p class="followUs">Made with Love by <a href="https://github.com/vinitshahdeo" target="_blank">Vinit Shahdeo</a></p>
     </div>
   </div>
 </div>
-  
+
     <script src="js/index.js"></script>
 
 </body>