update

src/components/buttonDesign/ButtonDesign.js

@@ -21,47 +21,47 @@ const ButtonDesign = () => {
           <h2 className="text-lg text-black">طراحی دکمه های سایت</h2>
         </div>
         {/* Button UI Design */}
-        <div className="flex justify-around items-center">
+        <div className="flex flex-wrap justify-around items-center">
           <div>
-            <button className="bg-moreInfoButtonBg text-white text-md rounded px-6 py-2 border-b-4 border-moreInfoButtonBorderColor my-2 ">
+            <button className="bg-moreInfoButtonBg text-white text-sm md:text-base rounded px-6 py-2 border-b-4 border-moreInfoButtonBorderColor my-2 ">
               اطلاعات بیشتر
             </button>
             <br />
-            <button className="bg-moreInfoButtonBg text-white text-md rounded px-6 py-2 my-2">
+            <button className="bg-moreInfoButtonBg text-white text-sm md:text-base rounded px-6 py-2 my-2">
               اطلاعات بیشتر
             </button>
             <br />
-            <button className="bg-moreInfoButtonBg text-white text-md rounded-full px-6 py-2 my-2">
+            <button className="bg-moreInfoButtonBg text-white text-sm md:text-base rounded-full px-6 py-2 my-2">
               اطلاعات بیشتر
             </button>
             <br />
-            <button className="bg-moreInfoButtonBg text-white text-md rounded px-6 py-2 border-b-4 border-moreInfoButtonBorderColor my-2 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300">
+            <button className="bg-moreInfoButtonBg text-white text-sm md:text-base rounded px-6 py-2 border-b-4 border-moreInfoButtonBorderColor my-2 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300">
               Hover ME
             </button>
             <br />
-            <button className="flex items-center bg-moreInfoButtonBg text-white text-md rounded px-6 py-2 my-2">
+            <button className="flex items-center bg-moreInfoButtonBg text-white text-sm md:text-base rounded px-6 py-2 my-2">
               اطلاعات بیشتر
               <img src={whiteLeftArrow} alt="" className="w-4 mr-1" />
             </button>
           </div>
           <div>
-            <button className="border-2 border-moreInfoButtonBorderColor text-moreInfoButtonTextColor text-md rounded px-6 py-2 my-2">
+            <button className="border-2 border-moreInfoButtonBorderColor text-moreInfoButtonTextColor text-sm md:text-base rounded px-6 py-2 my-2">
               اطلاعات بیشتر
             </button>
             <br />
-            <button className="border-2 border-moreInfoButtonBorderColor text-moreInfoButtonTextColor text-md rounded-full px-6 py-2 my-2">
+            <button className="border-2 border-moreInfoButtonBorderColor text-moreInfoButtonTextColor text-sm md:text-base rounded-full px-6 py-2 my-2">
               اطلاعات بیشتر
             </button>
             <br />
-            <button className="flex items-center border-2 border-moreInfoButtonBorderColor text-moreInfoButtonTextColor text-md rounded-full px-6 py-2 my-2">
+            <button className="flex items-center border-2 border-moreInfoButtonBorderColor text-moreInfoButtonTextColor text-sm md:text-base rounded-full px-6 py-2 my-2">
               اطلاعات بیشتر
               <img src={greenLeftArrow} alt="" className="w-4 mr-1" />
             </button>
-            <button className="flex items-center  text-moreInfoButtonTextColor text-md rounded-full px-6 py-2 my-2">
+            <button className="flex items-center  text-moreInfoButtonTextColor text-sm md:text-base rounded-full px-6 py-2 my-2">
               اطلاعات بیشتر
               <img src={greenLeftArrow} alt="" className="w-4 mr-1" />
             </button>
-            <button className="flex items-center border-2 border-moreInfoButtonBorderColor text-moreInfoButtonTextColor text-md rounded-full px-6 py-2 my-2">
+            <button className="flex items-center border-2 border-moreInfoButtonBorderColor text-moreInfoButtonTextColor text-sm md:text-base rounded-full px-6 py-2 my-2">
               اطلاعات بیشتر
               <span className="bg-moreInfoButtonBg rounded-full p-2 mr-2">
                 <img src={whiteLeftArrow} alt="" className="w-4" />
@@ -69,7 +69,7 @@ const ButtonDesign = () => {
             </button>
           </div>
           <div>
-            <button className="bg-cancleButtonBg text-cancleButtonTextColor text-md rounded px-6 py-2 my-2">
+            <button className="bg-cancleButtonBg text-cancleButtonTextColor text-sm md:text-base rounded px-6 py-2 my-2">
               لغو کردن
             </button>
             <br />