Merge pull request #1204 from KhushiChauhan8/buttons

Enhance the Design and Styling of "Login" and "Get Started" Buttons on Feedback Page
vimistify · Nov 8, 2024 · 8618b9d · 8618b9d
2 parents ea22b3e + 81ccb8f
commit 8618b9d
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 3 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
@@ -16,6 +16,57 @@
     <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
     <!--Updated to latest version-->
     <style>
+
+   /* Font size and padding of buttons */
+.buttons .login,
+.buttons .get-started,
+.dark-mode-toggle {
+    font-size: 18px; 
+    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); 
+}
+
+/* Get Started button hover effect */
+.get-started:hover {
+    background-color: darkblue; /* Darker shade for hover effect */
+    transform: scale(1.05); /* Slightly enlarge the button */
+
+}
+
         /* font size of button */
         .buttons .login,
         .buttons .get-started,
@@ -26,6 +77,7 @@
             /* Adjust padding for better appearance */
         }
 
+
         /* more addition for dark mode theme */
 
         .dark-mode .logo img {
@@ -309,6 +361,7 @@
                 <button class="light-dark-btn dark-mode-toggle" id="dark-mode-toggle">
                     <i class="fa-solid fa-moon"></i>
                 </button>
+
             </div>