animation btn unitSwitch component

Author: delafuentej

src/components/Header/Header.module.css

@@ -10,9 +10,7 @@
 /* Pantallas medianas (tablets) */
 @media only screen and (min-width: 601px) and (max-width: 900px) {
   .wrapper{
-    /* display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 10px; */
+   
 }
 }
 
@@ -22,7 +20,9 @@
     display: inline-flex;
     flex-direction: row;
     justify-content: space-around; 
-    height: 10%;
+    align-items: center;
+    height:auto;
     width: 100%;
+   
   }
 }

src/components/UnitSwitch/UnitSwitch.module.css

@@ -5,9 +5,10 @@
 }
 
 .btn{
+    cursor:pointer;
     background-color: rgba(223, 238, 238, 0.53);
     border:none;
-    transition: transform 500ms ease-in-out;
+    transition: transform 500ms ease-in-out, color 0.3s ease;
     border-radius: 25px;
     padding: 0.6rem;
     font-size: 1rem;
@@ -21,13 +22,18 @@
     display: inline;
     margin: 0 0.5rem;
 }
+.switch:hover {
+    transform: scale(1.05); 
+  }
 
 .active{
     color: rgb(91, 146, 8);
+    transform: scale(1.1); 
 }
 
 .inactive{
     color: rgba(104, 98, 31, 0.82);
+    transform: scale(1); 
 }
 
 @media only screen and (min-width: 601px) and (max-width: 900px) {