master
mahdi 3 years ago
parent a1ec6ac40e
commit dfb76b1c8d
  1. 24
      src/components/buttonDesign/ButtonDesign.js

@ -21,47 +21,47 @@ const ButtonDesign = () => {
<h2 className="text-lg text-black">طراحی دکمه های سایت</h2> <h2 className="text-lg text-black">طراحی دکمه های سایت</h2>
</div> </div>
{/* Button UI Design */} {/* Button UI Design */}
<div className="flex justify-around items-center"> <div className="flex flex-wrap justify-around items-center">
<div> <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> </button>
<br /> <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> </button>
<br /> <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> </button>
<br /> <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 Hover ME
</button> </button>
<br /> <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" /> <img src={whiteLeftArrow} alt="" className="w-4 mr-1" />
</button> </button>
</div> </div>
<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> </button>
<br /> <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> </button>
<br /> <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" /> <img src={greenLeftArrow} alt="" className="w-4 mr-1" />
</button> </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" /> <img src={greenLeftArrow} alt="" className="w-4 mr-1" />
</button> </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"> <span className="bg-moreInfoButtonBg rounded-full p-2 mr-2">
<img src={whiteLeftArrow} alt="" className="w-4" /> <img src={whiteLeftArrow} alt="" className="w-4" />
@ -69,7 +69,7 @@ const ButtonDesign = () => {
</button> </button>
</div> </div>
<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> </button>
<br /> <br />

Loading…
Cancel
Save