Enhanced Armstrong Number Calculator UI (#1223)

Rakesh9100 · Jun 11, 2024 · c3f939a · c3f939a
1 parent ddd94f3
commit c3f939a
Showing 1 changed file with 36 additions and 7 deletions.
diff --git a/Calculators/Armstrong-Number-Calculator/style.css b/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,38 @@ 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;
+}