Enhanced Armstrong Number Calculator UI

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>

Calculators/Antilog-Calculator/style.css

@@ -43,18 +43,43 @@ body {
     margin-bottom: 10px;
 }
 
-#button {
+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(255, 255, 255);
+    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 #4e45d5;
+    color: black;
+}
+h4{
+    color: #6376e0;
 }
 
-#button:hover{
-    border: none;
-    background-color: white;
-    box-shadow: 3px 3px 3px rgb(113, 105, 201);
-}

Calculators/Armstrong-Number-Calculator/style.css

@@ -1,5 +1,5 @@
 body {
-    background-color: rgb(255, 177, 255);
+    background-color: rgb(6, 0, 67);
     margin: 0;
     display: flex;
     flex-direction: column;
@@ -9,14 +9,14 @@ body {
 }
 
 h1 {
-    color: #8C1C1C;
+    color: #c7c3c3;
     margin-bottom: 40px;
 }
 
 .container {
     display: flex;
     flex-direction: column;
-    color: rgb(78, 2, 78);
+    color: rgb(5, 12, 43);
     font-size: large;
     align-items: center;
     justify-content: center;
@@ -45,9 +45,36 @@ input {
 
 button {
     padding: 10px;
-    background-color: rgb(78, 2, 78);
+    background-color: #4e45d5;
     color: white;
-    border: none;
+    width: fit-content;
+
+    box-shadow: 5px 5px 7px 0px #0000003f;
+    font-size: 18px;
     cursor: pointer;
-    font-size: medium;
-}
+    transition: all 0.5s;
+    font-weight: 500;
+    border: solid 3px transparent;
+    position: relative;
+    z-index: 1;
+}
+button::before{
+    content:"";
+    position: absolute;
+    background-color: #fff;
+    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 #4e45d5;
+    color: black;
+}