Buttons interactivity

Author: coder8080

index.html

@@ -98,7 +98,7 @@
                 <div class="flex flex-row items-center gap-5">
                     <a href="#">Login</a>
                     <button
-                        class="bg-[#F44545] font-medium px-6 py-2 text-white rounded-lg"
+                        class="bg-[#F44545] font-medium px-6 py-2 text-white rounded-lg hover:scale-102 transition cursor-pointer hover:opacity-80"
                         aria-label="Sign Up"
                     >
                         Sign Up
@@ -148,7 +148,7 @@
                                 class="outline-none grow w-0"
                             />
                             <button
-                                class="bg-[#F44545] font-medium px-6 py-2 text-white rounded-lg"
+                                class="bg-[#F44545] font-medium px-6 py-2 text-white rounded-lg transition hover:scale-102 hover:opacity-80 cursor-pointer"
                                 aria-label="Send Email"
                             >
                                 Send
@@ -318,7 +318,7 @@
                     class="grid grid-cols-1 xl:grid-rows-2 xl:grid-cols-2 gap-8 flex-3"
                 >
                     <div
-                        class="p-8 rounded-xl shadow-lg hover:shadow-xl transition"
+                        class="p-8 rounded-xl shadow-lg hover:shadow-3xl transition"
                     >
                         <div
                             class="w-20 aspect-square bg-linear-to-br from-[#FF9A9A] to-[#F14C4C] rounded-xl flex items-center justify-center shadow-xl shadow-[#D7151580]"
@@ -339,7 +339,7 @@ <h2 class="mt-6 font-semibold text-xl">
                         </p>
                     </div>
                     <div
-                        class="p-8 rounded-xl shadow-lg hover:shadow-xl transition"
+                        class="p-8 rounded-xl shadow-lg hover:shadow-3xl transition"
                     >
                         <div
                             class="w-20 aspect-square bg-linear-to-br from-[#85FED6] to-[#4EDAAC] rounded-xl flex items-center justify-center shadow-xl shadow-[#53D7AB80]"
@@ -360,7 +360,7 @@ <h2 class="mt-6 font-semibold text-xl">
                         </p>
                     </div>
                     <div
-                        class="p-8 rounded-xl shadow-lg hover:shadow-xl transition"
+                        class="p-8 rounded-xl shadow-lg hover:shadow-3xl transition"
                     >
                         <div
                             class="w-20 aspect-square bg-linear-to-br from-[#FCD876] to-[#FABC13] rounded-xl flex items-center justify-center shadow-xl shadow-[#EEB92A99]"
@@ -379,7 +379,7 @@ <h2 class="mt-6 font-semibold text-xl">Full secured</h2>
                         </p>
                     </div>
                     <div
-                        class="p-8 rounded-xl shadow-lg hover:shadow-xl transition"
+                        class="p-8 rounded-xl shadow-lg hover:shadow-3xl transition"
                     >
                         <div
                             class="w-20 aspect-square bg-linear-to-br from-[#FE9AF4] to-[#EC4EDC] rounded-xl flex items-center justify-center shadow-xl shadow-[#E644D680]"
@@ -553,7 +553,7 @@ <h2 class="mt-6 font-semibold text-xl">Clean Code</h2>
                         of the actual tool and the performance.
                     </p>
                     <button
-                        class="bg-[#F44545] font-medium px-6 py-2 text-white rounded-lg mt-6"
+                        class="bg-[#F44545] font-medium px-6 py-2 text-white rounded-lg mt-6 transition hover:scale-102 hover:opacity-80 cursor-pointer"
                         aria-label="Download"
                     >
                         Download now
@@ -669,7 +669,7 @@ <h2 class="capitalize font-semibold opacity-50">
                             <span class="opacity-50">No</span>
                         </div>
                         <button
-                            class="text-[#F44545] border-2 border-[#F44545]/20 text-[xl] rounded-lg py-[13px] px-[75px] mt-10 font-semibold"
+                            class="text-[#F44545] border-2 border-[#F44545]/20 text-[xl] rounded-lg py-[13px] px-[75px] mt-10 font-semibold bg-white transition hover:scale-102 hover:bg-[#F44545]/10 cursor-pointer"
                             aria-label="Buy Plan"
                         >
                             Buy Plan
@@ -733,7 +733,7 @@ <h2 class="capitalize font-semibold opacity-50">
                             <span class="opacity-50">No</span>
                         </div>
                         <button
-                            class="bg-[#F55454] text-white text-[xl] rounded-lg py-[13px] px-[75px] mt-10 font-semibold"
+                            class="bg-[#F55454] text-white text-[xl] rounded-lg py-[13px] px-[75px] mt-10 font-semibold transition hover:scale-102 hover:opacity-80 cursor-pointer"
                             aria-label="Buy Plan"
                         >
                             Buy Plan
@@ -795,7 +795,7 @@ <h2 class="capitalize font-semibold opacity-50">
                             <span>Yes</span>
                         </div>
                         <button
-                            class="text-[#F44545] border-2 border-[#F44545]/20 text-[xl] rounded-lg py-[13px] px-[75px] mt-10 font-semibold"
+                            class="text-[#F44545] border-2 border-[#F44545]/20 text-[xl] rounded-lg py-[13px] px-[75px] mt-10 font-semibold bg-white transition hover:scale-102 hover:bg-[#F44545]/10 cursor-pointer"
                             aria-label="Buy Plan"
                         >
                             Buy Plan