Merge pull request #762 from Utkarsh3128/main

added feature underline button Hover Effects
aniketsinha2002 · Sep 17, 2023 · 4172376 · 4172376
2 parents e0aa342 + 3ad93ba
commit 4172376
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 6 deletions.
diff --git a/css/style.css b/css/style.css
@@ -1092,6 +1092,27 @@ nav button {
   box-shadow: 5px 5px 5px orange;
 }
 
+.nav-animation{
+  position: relative;
+}
+
+.nav-animation::after{
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 0.120rem;
+  background: #ff3c78;
+  left: 0;
+  bottom: 0;
+  transform: scale(0,1);
+  transform-origin: 0% 100%;
+  transition: transform 0.4s ease;
+}
+
+.nav-animation:hover::after{
+  transform: scale(1,1);
+}
+
 .para1 {
   margin-top: 1rem;
   font-size: 1.5rem;

diff --git a/index.html b/index.html
@@ -158,12 +158,12 @@ <h1>
           <h4>DATA SCIENCE</h4>
         </a>
         <ul class="nav__menu">
-          <li class="active nav-link-container"><a href="index.html" class="nav-link">Home</a></li>
-          <li class="nav-link-container"><a href="#about" class="nav-link">About</a></li>
-          <li class="nav-link-container"><a href="#courses" class="nav-link">Courses</a></li>
-          <li class="nav-link-container"><a href="#faqs" class="nav-link">FAQ</a></li>
-          <li class="nav-link-container"><a href="contact/index.html" class="nav-link">Contact</a></li>
-          <li class="nav-link-container"><a href="./Team/team.html" class="nav-link">TEAM</a></li>
+          <li class="active nav-link-container"><a href="index.html" class="nav-link nav-animation">Home</a></li>
+          <li class="nav-link-container"><a href="#about" class="nav-link nav-animation">About</a></li>
+          <li class="nav-link-container"><a href="#courses" class="nav-link nav-animation">Courses</a></li>
+          <li class="nav-link-container"><a href="#faqs" class="nav-link nav-animation">FAQ</a></li>
+          <li class="nav-link-container"><a href="contact/index.html" class="nav-link nav-animation">Contact</a></li>
+          <li class="nav-link-container "><a href="./Team/team.html" class="nav-link nav-animation">TEAM</a></li>
           <li class="nav-link-container"><a class="signup nav-link" href="./login/index.html">Sign Up</a></li>
         </ul>
         <button id="open-menu-btn"><i class="uil uil-bars"></i></button>