changes in button

Author: Engineervinay

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

index.html

@@ -21,7 +21,7 @@ <h1>LeetSpeak Translator</h1>
     <br>
     <br>
     <div class="wrap">
-        <button id="btn" class="button">Translate</button>
+        <button id="btn" class="button button-translate">Translate</button>
     </div>
     <br>
 

style.css

@@ -99,79 +99,29 @@ footer{
     align-items: center;
     justify-content: center;
   }
-  
   .button {
-    min-width: 300px;
-    min-height: 60px;
-    font-family: 'Sniglet', cursive;
-    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%);
+    /* Green */
     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;
-    }
-  
-  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);
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    border-radius:1rem;
+    cursor:pointer;
+    transition-duration:0.7s;
+    
   }
-  
-  button:hover::before, button:focus::before {
-    opacity: 1;
+  .button-translate {
+    
+    background-color: var(--primary-color);
+    color: black;
   }
-  
-  button::after {
-    content: '';
-    width: 30px; height: 30px;
-    border-radius: 100%;
-    border: 5px solid #00FFCB;
-    position: absolute;
-    z-index: -1;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    animation: ring 1.5s infinite;
+  .button-translate:after{
+    color:white;
   }
-  
-  button:hover::after, button:focus::after {
-    animation: none;
-    display: none;
+  .button-translate:hover{
+    color:white;
+    background-color:rgb(42, 238, 107);
+    border-radius: 0rem;
   }
-  
-  @keyframes ring {
-    0% {
-      width: 30px;
-      height: 30px;
-      opacity: 1;
-    }
-    100% {
-      width: 300px;
-      height: 300px;
-      opacity: 0;
-    }
-  }