danovinTasks/src/components/buttonDesign/ButtonDesign.js

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;