From a6effae8e7a157bbe67dddb3e5a8764d8c6590f4 Mon Sep 17 00:00:00 2001
From: Ram Maheshwari <ram991011@gmail.com>
Date: Tue, 14 Sep 2021 12:11:17 +0530
Subject: [PATCH] Added hover effect for button, nav links and logo container

---
 css/style.css                  | 17 +++++++++++++----
 sass/abstracts/_utilities.scss |  5 +++++
 sass/components/_header.scss   | 12 +++++++++++-
 3 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/css/style.css b/css/style.css
index 09b32998..6b3e36d6 100644
--- a/css/style.css
+++ b/css/style.css
@@ -144,7 +144,10 @@ textarea {
   display: inline-block;
   font-weight: 700;
   border-radius: 5px;
-  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15); }
+  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
+  transition: transform .5s; }
+  .btn:hover {
+    transform: translateY(-3px); }
   .btn--bg {
     padding: 1.5rem 8rem;
     font-size: 2rem; }
@@ -502,7 +505,11 @@ textarea {
   .header__logo-container {
     display: flex;
     align-items: center;
-    cursor: pointer; }
+    cursor: pointer;
+    color: #333;
+    transition: color .3s; }
+    .header__logo-container:hover {
+      color: #0062b9; }
   .header__logo-img-cont {
     width: 5rem;
     height: 5rem;
@@ -525,7 +532,6 @@ textarea {
     font-size: 1.8rem;
     text-transform: uppercase;
     font-weight: 700;
-    color: #333;
     letter-spacing: 1px; }
   .header__links {
     display: flex; }
@@ -539,7 +545,10 @@ textarea {
     color: #333;
     text-transform: uppercase;
     letter-spacing: 1px;
-    font-weight: 700; }
+    font-weight: 700;
+    transition: color .3s; }
+    .header__link:hover {
+      color: #0062b9; }
     @media only screen and (max-width: 56.25em) {
       .header__link {
         padding: 3rem 1.8rem;
diff --git a/sass/abstracts/_utilities.scss b/sass/abstracts/_utilities.scss
index 2205b133..35b140a6 100644
--- a/sass/abstracts/_utilities.scss
+++ b/sass/abstracts/_utilities.scss
@@ -97,6 +97,11 @@
   font-weight: 700;
   border-radius: $commonBorderRadius;
   box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
+  transition: transform .5s;
+
+  &:hover {
+    transform: translateY(-3px);
+  }
 
   &--bg {
     padding: 1.5rem 8rem;
diff --git a/sass/components/_header.scss b/sass/components/_header.scss
index d17bef0e..7d6306a1 100644
--- a/sass/components/_header.scss
+++ b/sass/components/_header.scss
@@ -20,6 +20,12 @@
     display: flex;
     align-items: center;
     cursor: pointer;
+    color: #333;
+    transition: color .3s;
+
+    &:hover {
+      color: $themeClrPrimary;
+    }
   }
   &__logo-img-cont {
     width: 5rem;
@@ -46,7 +52,6 @@
     font-size: 1.8rem;
     text-transform: uppercase;
     font-weight: 700;
-    color: #333;
     letter-spacing: 1px;
   }
   &__links {
@@ -63,6 +68,11 @@
     text-transform: uppercase;
     letter-spacing: 1px;
     font-weight: 700;
+    transition: color .3s;
+
+    &:hover {
+      color: $themeClrPrimary;
+    }
     @include respond(tab-port) {
       padding: 3rem 1.8rem;
       font-size: 1.5rem;