Merge pull request #25 from csesoc/CW2-58-animate-button

[CW2-58] Animate Follow Button
csesoc · Jul 25, 2024 · 946c7d0 · 946c7d0
2 parents 6469bae + 7a4b02f
commit 946c7d0
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/frontend/src/pages/about/index.tsx b/frontend/src/pages/about/index.tsx
@@ -18,7 +18,7 @@ export default function AboutPage() {
               <h2 className="mt-10 text-3xl font-extrabold">CSESoc</h2>
               <p className="text-[#727B8C] font-medium">unsw-computer-science-engineering-society</p>
               <a href="https://www.facebook.com/csesoc/" target="_blank">
-                <button className="bg-[#444F6F] w-full my-5 py-2 rounded">Follow</button>
+                <button className="bg-[#444F6F] w-full my-5 py-2 rounded hover-animate">Follow</button>
               </a>
               <p>
                 CSESoc is the principal representative body for UNSW computing students.

diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
@@ -21,3 +21,11 @@ body {
 .animate-blink {
   animation: blink 1s step-end infinite;
 }
+
+.hover-animate {
+  transition: transform 0.3s ease;
+}
+
+.hover-animate:hover {
+  transform: scale(1.01);
+}