adding icon hover animation in modal and buttons

cesarolvr · Feb 9, 2024 · f297279 · f297279
1 parent 2576e59
commit f297279
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git a/src/components/Modal/index.scss b/src/components/Modal/index.scss
@@ -65,12 +65,21 @@
         cursor: pointer;
         border-bottom: 1px solid #3b3b3b;
 
+        svg {
+          transition: transform 0.3s ease;
+        }
+
         &:hover, &.-active {
           background: #474747;
 
           a {
             text-decoration: none;
           }
+
+          svg {
+            transform: scale(1.5);
+            stroke: white;
+          }
         }
 
         &:last-of-type {

diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -109,10 +109,24 @@ button,
   font-weight: lighter;
   line-height: 14px;
 
+  svg {
+    transition: transform 0.3s ease;
+  }
+
   &:hover {
     text-decoration: none;
+
     cursor: pointer;
     background-color: #3a3a3a;
+
+    p {
+      color: white;
+    }
+
+    svg {
+      transform: scale(1.2);
+      stroke: white;
+    }
   }
 
   &.-toggle {
@@ -123,6 +137,7 @@ button,
     &:hover {
       background: none;
       text-decoration: underline;
+      color: white;
     }
   }