|
After Width: | Height: | Size: 404 B |
|
After Width: | Height: | Size: 658 B |
|
After Width: | Height: | Size: 642 B |
|
After Width: | Height: | Size: 658 B |
|
After Width: | Height: | Size: 385 B |
|
After Width: | Height: | Size: 580 B |
|
After Width: | Height: | Size: 343 B |
|
After Width: | Height: | Size: 587 B |
|
After Width: | Height: | Size: 655 B |
|
After Width: | Height: | Size: 329 B |
@ -0,0 +1,110 @@ |
||||
import React from "react"; |
||||
import "./ButtonDesign.scss"; |
||||
|
||||
import greenLeftArrow from "../../assets/icons/green-left-arrow.svg"; |
||||
|
||||
import whiteLeftArrow from "../../assets/icons/white-left-arrow.svg"; |
||||
import whiteRightArrow from "../../assets/icons/white-right-arrow.svg"; |
||||
import whiteUpwardArrow from "../../assets/icons/white-upward-arrow.svg"; |
||||
import whiteDownwardArrow from "../../assets/icons/white-downward-arrow.svg"; |
||||
|
||||
import blackRightArrow from "../../assets/icons/black-right-arrow.svg"; |
||||
import blackLeftArrow from "../../assets/icons/black-left-arrow.svg"; |
||||
import blackUpwardArrow from "../../assets/icons/black-upward-arrow.png"; |
||||
import blackDownwardArrow from "../../assets/icons/black-downward-arrow.png"; |
||||
|
||||
const ButtonDesign = () => { |
||||
return ( |
||||
<div> |
||||
<section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8"> |
||||
<div className="flex items-center justify-between mb-6"> |
||||
<h2 className="text-lg text-black">طراحی دکمه های سایت</h2> |
||||
</div> |
||||
{/* Button UI Design */} |
||||
<div className="flex 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> |
||||
<br /> |
||||
<button className="bg-moreInfoButtonBg text-white text-md 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> |
||||
<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"> |
||||
Hover ME |
||||
</button> |
||||
<br /> |
||||
<button className="flex items-center bg-moreInfoButtonBg text-white text-md 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> |
||||
<br /> |
||||
<button className="border-2 border-moreInfoButtonBorderColor text-moreInfoButtonTextColor text-md 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"> |
||||
اطلاعات بیشتر |
||||
<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"> |
||||
اطلاعات بیشتر |
||||
<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"> |
||||
اطلاعات بیشتر |
||||
<span className="bg-moreInfoButtonBg rounded-full p-2 mr-2"> |
||||
<img src={whiteLeftArrow} alt="" className="w-4" /> |
||||
</span> |
||||
</button> |
||||
</div> |
||||
<div> |
||||
<button className="bg-cancleButtonBg text-cancleButtonTextColor text-md rounded px-6 py-2 my-2"> |
||||
لغو کردن |
||||
</button> |
||||
<br /> |
||||
<button className="bg-cancleButtonBg p-4 rounded-md"> |
||||
<img src={blackRightArrow} alt="" className="w-4" /> |
||||
</button> |
||||
<button className="bg-cancleButtonBg p-4 rounded-md mr-2"> |
||||
<img src={blackLeftArrow} alt="" className="w-4" /> |
||||
</button> |
||||
<br /> |
||||
<button className="bg-moreInfoButtonBg p-4 rounded-md my-2"> |
||||
<img src={whiteRightArrow} alt="" className="w-4" /> |
||||
</button> |
||||
<button className="bg-moreInfoButtonBg p-4 rounded-md mr-2"> |
||||
<img src={whiteLeftArrow} alt="" className="w-4" /> |
||||
</button> |
||||
<br /> |
||||
<button className="bg-cancleButtonBg p-4 rounded-md"> |
||||
<img src={blackUpwardArrow} alt="" className="w-4" /> |
||||
</button> |
||||
<button className="bg-cancleButtonBg p-4 rounded-md mr-2"> |
||||
<img src={blackDownwardArrow} alt="" className="w-4" /> |
||||
</button> |
||||
<br /> |
||||
<button className="bg-moreInfoButtonBg p-4 rounded-full my-2"> |
||||
<img src={whiteUpwardArrow} alt="" className="w-4 h-4" /> |
||||
</button> |
||||
<button className="bg-moreInfoButtonBg p-4 rounded-full mr-2"> |
||||
<img src={whiteDownwardArrow} alt="" className="w-4 h-4" /> |
||||
</button> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default ButtonDesign; |
||||