Merge pull request #789 from sohelhussain/sohel/btn

feat: Adjusted button smoother UI experience
PriyaGhosal · Oct 26, 2024 · 8341320 · 8341320
2 parents 6c24b32 + b439859
commit 8341320
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -205,8 +205,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>
@@ -431,7 +431,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>
@@ -851,9 +851,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>
@@ -1060,7 +1060,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>
@@ -1239,7 +1239,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>
@@ -1296,7 +1296,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
@@ -212,4 +212,29 @@
   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;
 }