From b439859ca7213a7b356b81dcf7384d2df44faf08 Mon Sep 17 00:00:00 2001
From: sohelhussain <sohelhussaing@gmail.com>
Date: Tue, 22 Oct 2024 08:23:59 +0530
Subject: [PATCH] feat: Adjusted button smoother UI experience

---
 index.html | 18 +++++++++---------
 style.css  | 25 +++++++++++++++++++++++++
 2 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index a45f16a3..98d0a1f1 100644
--- a/index.html
+++ b/index.html
@@ -201,8 +201,8 @@ <h1 class="headline-lg" id="hero-label" data-aos="zoom-out">
               It is long established fact that reader distracted by the readable content.
             </p>
 
-            <div class="btn-group" data-aos="flip-down">
-              <a href="#" class="btn btn-primary">Get Started Now</a>
+            <div class="" data-aos="flip-down">
+              <a href="#" class="button">Get Started Now</a>
 
 
             </div>
@@ -419,7 +419,7 @@ <h3 class="title-lg">Finances</h3>
           </ul>
 
           <div class="button-container">
-            <a href="Course.html" class="btn btn-primary" data-aos="zoom-in">
+            <a href="Course.html" class="button" data-aos="zoom-in">
               View All Categories
             </a>
           </div>
@@ -842,9 +842,9 @@ <h3 class="title-lg card-title">
         </li>
 
         </ul>
-        <div class="button-container">
-          <a href="Course.html" class="btn btn-primary" data-aos="zoom-in">
-            View All Courses
+        <div class="button-container btn-box">
+          <a href="Course.html" class="button" data-aos="zoom-in">
+            View All Courses 
           </a>
         </div>
         </div>
@@ -1051,7 +1051,7 @@ <h3 class="title-lg card-title">
           </ul>
 
           <div class="button-container">
-            <a href="./pages/blog.html" class="btn btn-primary" data-aos="zoom-in">
+            <a href="./pages/blog.html" class="button" data-aos="zoom-in">
               View All Blogs
             </a>
           </div>
@@ -1230,7 +1230,7 @@ <h3 class="title-lg card-title">Emily Johnson</h3>
           </ul>
 
           <div class="button-container">
-            <a href="./pages/testimonials.html" class="btn btn-primary" data-aos="zoom-in">See All Testimonials</a>
+            <a href="./pages/testimonials.html" class="button" data-aos="zoom-in">See All Testimonials</a>
           </div>
 
         </div>
@@ -1287,7 +1287,7 @@ <h3 class="event-title">Creative Design Thinking</h3>
           </div>
 
           <div class="button-container">
-            <a href="./pages/events.html" class="btn btn-primary see-all" data-aos="zoom-in">View All Workshops</a>
+            <a href="./pages/events.html" class="button see-all" data-aos="zoom-in">View All Workshops</a>
           </div>
         </div>
       </section>
diff --git a/style.css b/style.css
index c0b77819..ae0243f8 100644
--- a/style.css
+++ b/style.css
@@ -209,4 +209,29 @@ margin-right: 60px;
   margin-bottom: 10px;
   font-size: 36px;
   width: 50%;
+}
+
+.btn-box{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.button{
+  display: inline-block;
+  width: fit-content;
+  background-color: rgba(0, 0, 0, 0.753);
+  padding: 10px 20px;
+  border-radius: 10px;
+  font-size: 20px;
+  text-align: center;
+  font-weight: bold;
+  color: white;
+  transition: all 0.9s ease;
+}
+
+.button:hover{
+  background-color: rgba(0, 0, 0, 0.977);
+  transform: scale(1.3);
+  color: white;
 }
\ No newline at end of file