Merge pull request #381 from doctor-rutvik14/main

Improved UX for Buttons
PriyaGhosal · Oct 11, 2024 · 634747b · 634747b
2 parents 79a0ae4 + 0e24f65
commit 634747b
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 8 deletions.
diff --git a/assets/css/darkmode.css b/assets/css/darkmode.css
@@ -98,6 +98,7 @@ button {
   cursor: pointer;
 }
 
+
 html {
   font-family: var(--ff-gilroy);
   font-size: 10px;
@@ -426,9 +427,38 @@ body.nav-active { overflow: hidden; }
     gap: 12px;
   }
 
-
-
-
+.button-container {
+  display: flex;
+  justify-content: center; /* Center horizontally */
+  align-items: center; /* Center vertically */
+  margin: 0; /* Remove default margin */
+  padding: 0; /* Remove default padding */
+}
+
+.btn-primary {
+    position: relative; /* Positioning for the arrows */
+    padding: 10px 50px; /* Add padding to make space for the arrows */
+    transition: color 0.3s ease; /* Smooth transition for text color */
+    font-size: 16px; /* Adjust font size as needed */
+}
+
+.btn-primary::after {
+    content: ' ⪢'; /* Two arrows as content */
+    position: absolute; /* Position it absolutely */
+    right: 5px; /* Position on the right side */
+    top: 50%; /* Center vertically */
+    transform: translateY(-55%); /* Adjust vertical position */
+    opacity: 0; /* Start with the arrows hidden */
+    transition: opacity 0.3s ease; /* Smooth transition for opacity */
+}
+
+.btn-primary:hover {
+    color: #ffffff; /* Change text color on hover (optional) */
+}
+
+.btn-primary:hover::after {
+    opacity: 1; /* Show the arrows on hover */
+}
 
   /*-----------------------------------*\
     #CATEGORY

diff --git a/assets/css/style.css b/assets/css/style.css
@@ -470,7 +470,38 @@ body.nav-active {
   gap: 12px;
 }
 
+.button-container {
+  display: flex;
+  justify-content: center; /* Center horizontally */
+  align-items: center; /* Center vertically */
+  margin: 0; /* Remove default margin */
+  padding: 0; /* Remove default padding */
+}
 
+.btn-primary {
+    position: relative; /* Positioning for the arrows */
+    padding: 10px 50px; /* Add padding to make space for the arrows */
+    transition: color 0.3s ease; /* Smooth transition for text color */
+    font-size: 16px; /* Adjust font size as needed */
+}
+
+.btn-primary::after {
+    content: ' ⪢'; /* Two arrows as content */
+    position: absolute; /* Position it absolutely */
+    right: 5px; /* Position on the right side */
+    top: 50%; /* Center vertically */
+    transform: translateY(-55%); /* Adjust vertical position */
+    opacity: 0; /* Start with the arrows hidden */
+    transition: opacity 0.3s ease; /* Smooth transition for opacity */
+}
+
+.btn-primary:hover {
+    color: #ffffff; /* Change text color on hover (optional) */
+}
+
+.btn-primary:hover::after {
+    opacity: 1; /* Show the arrows on hover */
+}
 
 /*-----------------------------------*\
   #Feedback

diff --git a/index.html b/index.html
@@ -384,7 +384,11 @@ <h3 class="title-lg">Finances</h3>
 
           </ul>
 
-          <a href="#" class="btn btn-primary" data-aos="flip-left">View All Categories</a>
+          <div class="button-container">
+            <a href="#" class="btn btn-primary" data-aos="zoom-in">
+                View All Categories
+            </a>
+          </div>
 
         </div>
       </section>
@@ -801,9 +805,11 @@ <h3 class="title-lg card-title">
             </li>
 
           </ul>
-
-          <a href="#" class="btn btn-primary" data-aos="zoom-out">View All Courses</a>
-
+          <div class="button-container">
+            <a href="#" class="btn btn-primary" data-aos="zoom-in">
+                View All Courses
+            </a>
+          </div>
         </div>
       </section>
 
@@ -959,7 +965,11 @@ <h3 class="title-lg card-title">
             </li>
           </ul>
 
-          <a href="./pages/blog.html" class="btn btn-primary" data-aos="zoom-in">View All Blogs</a>
+          <div class="button-container">
+            <a href="./pages/blog.html" class="btn btn-primary" data-aos="zoom-in">
+                View All Blogs
+            </a>
+          </div>
 
         </div>
       </section>