Enhance the Design and Styling of Login and Get Started Buttons on Fe…

…edback Page
dishaagarwal04 · Nov 8, 2024 · b2f988a · b2f988a
1 parent ae751b6
commit b2f988a
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 5 deletions.
diff --git a/Feedback.html b/Feedback.html
@@ -31,9 +31,52 @@
     .dark-mode-toggle {
       font-size: 18px;
       /* Increase font size */
-      padding: 10px 15px;
-      /* Adjust padding for better appearance */
-    }
+      padding: 10px 30px; 
+      transition: background-color 0.3s ease, transform 0.3s ease; 
+    }
+
+    /* Container spacing from the top */
+.buttons {
+    margin-top: 20px;
+    display: flex; 
+    gap: 30px; 
+}
+
+/* Login button styling */
+.login {
+    background-color: blue;
+    color: white; 
+    border: none; 
+    border-radius: 5px; 
+    padding: 10px 50px; 
+    text-decoration: none;
+}
+
+/* Get Started button styling */
+.get-started {
+    background-color: blue;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    padding: 10px 50px; 
+    text-decoration: none;
+
+}
+
+/* Login button hover effect */
+.login:hover {
+    background-color: darkblue; 
+    transform: scale(1.05); 
+    color: white;
+}
+
+/* Get Started button hover effect */
+.get-started:hover {
+    background-color: darkblue; /* Darker shade for hover effect */
+    transform: scale(1.05); /* Slightly enlarge the button */
+    color: white;
+
+}
 
 
     /* dark mode toggle button styling */

diff --git a/team.html b/team.html
@@ -28,7 +28,7 @@
 .buttons {
     margin-top: 20px;
     display: flex; 
-    gap: 15px; 
+    gap: 30px; 
 }
 
 /* Login button styling */
@@ -46,6 +46,7 @@
     background-color: blue;
     color: white;
     border: none;
+    border-radius: 5px; 
     padding: 10px 50px; 
     text-decoration: none;
 
@@ -347,7 +348,7 @@
                 <a href="up.html" class="get-started">Get started</a>
                 <button class="light-dark-btn dark-mode-toggle" id="dark-mode-toggle">
                     <i class="fa-solid fa-moon"></i>
-                  </button>
+                </button>
 
             </div>
             <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width: 80px; height: auto; padding-top: 2em;" />