button

size of previous button is very large
Rakesh9100 · Jun 3, 2024 · c88dab7 · c88dab7
1 parent 2a3ff9b
commit c88dab7
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 13 deletions.
diff --git a/Calculators/Antilog-Calculator/index.html b/Calculators/Antilog-Calculator/index.html
@@ -18,12 +18,12 @@ <h1>Antilog Calculator</h1>
         <div class="content">
             <p>Calculate the antilog of any number to any base:</p>
 
-            <div id="number1"><input type="number" id="number"  min="0" step="any" oninput="validity.valid && value!=0 || (value='');" placeholder="Enter number" required></div>
+            <div id="number1"><input type="number" id="number"  min="0" step="any" oninput="validity.valid && value!=0 || (value='');" placeholder="Enter Number" required></div>
 
-            <div id="base1"><input type="number" id="base" min="0.000001" step="any"   oninput="validity.valid && value!=0 || (value='');" onchange="validateBaseInput(this)" placeholder="Enter base" required><br><span id="baseError">INVALID INPUT *Base can't be 1*</span></div>
+            <div id="base1"><input type="number" id="base" min="0.000001" step="any"   oninput="validity.valid && value!=0 || (value='');" onchange="validateBaseInput(this)" placeholder="Enter Base" required><br><span id="baseError">INVALID INPUT *Base can't be 1*</span></div>
 
             <button onclick="calculateAntilog()" id="button">Calculate Antilog</button>
-            <h3>Result:</h3>
+            <h4>Result</h4>
             <h3 id="resultb"></h3>
             <p id="result"></p>
         </div>

diff --git a/Calculators/Antilog-Calculator/style.css b/Calculators/Antilog-Calculator/style.css
@@ -45,16 +45,40 @@ body {
 
 #button {
     margin-top: 20px;
-    padding: 20px 20px 20px 20px;
-    font-size: 20px;
-    border: solid 3px black;
-    border-radius: 5px;
     background-color: rgb(113, 105, 201);
-    transition: background-color 0.3s ease, box-shadow 0.3s ease;
+    color: white;
+    width: fit-content;
+    padding: 0.8rem 2rem;
+    box-shadow: 5px 5px 7px 0px #0000003f;
+    font-size: 18px;
+    cursor: pointer;
+    transition: all 0.5s;
+    font-weight: 500;
+    border: solid 3px transparent;
+    position: relative;
+    z-index: 1;
+}
+button::before{
+    content:"";
+    position: absolute;
+    background-color: rgb(175, 169, 169);
+    top: 0px;
+    left: 0;
+    right: 0;
+    bottom: 0px;
+    z-index: -1;
+    transform: scaleX(0);
+    transform-origin: left;
+    transition: all 0.8s;
+}
+button:hover::before{
+    transform: scaleX(1);
+}
+button:hover{
+    border: solid 3px #6c65cd;
+    color: black;
+}
+h4{
+    color: #6376e0;
 }
 
-#button:hover{
-    border: none;
-    background-color: white;
-    box-shadow: 3px 3px 3px rgb(113, 105, 201);
-}