button styles added

src/App.js

@@ -1,10 +1,12 @@
 import "./App.scss";
+import ButtonDesign from "./components/buttonDesign/ButtonDesign";
 import ProductDesign from "./components/productDesign/ProductDesign";
 
 function App() {
   return (
     <div className="App">
-      <ProductDesign />
+      {/* <ProductDesign /> */}
+      <ButtonDesign />
     </div>
   );
 }

src/assets/icons/black-downward-arrow.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="37.14" height="37.14" viewBox="0 0 37.14 37.14">
+  <g id="vuesax_linear_arrow-left" data-name="vuesax/linear/arrow-left" transform="translate(401.14 289.14) rotate(180)">
+    <g id="arrow-left" transform="translate(364 252)">
+      <path id="Vector" d="M10.983,24.512.894,14.423a3.073,3.073,0,0,1,0-4.333L10.983,0" transform="translate(12.229 6.314)" fill="none" stroke="#646464" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+      <path id="Vector-2" data-name="Vector" d="M0,0H37.14V37.14H0Z" transform="translate(37.14 37.14) rotate(180)" fill="none" opacity="0"/>
+    </g>
+  </g>
+</svg>

src/assets/icons/black-left-arrow.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="37.14" height="37.14" viewBox="0 0 37.14 37.14">
+  <g id="vuesax_linear_arrow-left" data-name="vuesax/linear/arrow-left" transform="translate(-364 -252)">
+    <g id="arrow-left" transform="translate(364 252)">
+      <path id="Vector" d="M10.983,24.512.894,14.423a3.073,3.073,0,0,1,0-4.333L10.983,0" transform="translate(12.229 6.314)" fill="none" stroke="#646464" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+      <path id="Vector-2" data-name="Vector" d="M0,0H37.14V37.14H0Z" transform="translate(37.14 37.14) rotate(180)" fill="none" opacity="0"/>
+    </g>
+  </g>
+</svg>

src/assets/icons/black-right-arrow.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="37.14" height="37.14" viewBox="0 0 37.14 37.14">
+  <g id="vuesax_linear_arrow-left" data-name="vuesax/linear/arrow-left" transform="translate(401.14 289.14) rotate(180)">
+    <g id="arrow-left" transform="translate(364 252)">
+      <path id="Vector" d="M10.983,24.512.894,14.423a3.073,3.073,0,0,1,0-4.333L10.983,0" transform="translate(12.229 6.314)" fill="none" stroke="#646464" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+      <path id="Vector-2" data-name="Vector" d="M0,0H37.14V37.14H0Z" transform="translate(37.14 37.14) rotate(180)" fill="none" opacity="0"/>
+    </g>
+  </g>
+</svg>

src/assets/icons/green-left-arrow.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="vuesax_linear_arrow-left" data-name="vuesax/linear/arrow-left" transform="translate(-364 -252)">
+    <g id="arrow-left">
+      <path id="Vector" d="M7.1,15.84.577,9.32a1.986,1.986,0,0,1,0-2.8L7.1,0" transform="translate(371.902 256.08)" fill="none" stroke="#06bace" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path id="Vector-2" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(388 276) rotate(180)" fill="none" opacity="0"/>
+    </g>
+  </g>
+</svg>

src/assets/icons/white-downward-arrow.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="28.755" height="14.605" viewBox="0 0 28.755 14.605">
+  <path id="Vector" d="M10.983,24.512,3.275,16.8.894,14.423a3.073,3.073,0,0,1,0-4.333L10.983,0" transform="translate(2.121 13.105) rotate(-90)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+</svg>

src/assets/icons/white-left-arrow.svg

@@ -0,0 +1,6 @@
+<svg id="vuesax_linear_arrow-left" data-name="vuesax/linear/arrow-left" xmlns="http://www.w3.org/2000/svg" width="33.524" height="33.524" viewBox="0 0 33.524 33.524">
+  <g id="arrow-left" transform="translate(0 0)">
+    <path id="Vector" d="M9.914,22.126.807,13.018a2.774,2.774,0,0,1,0-3.911L9.914,0" transform="translate(11.038 5.699)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+    <path id="Vector-2" data-name="Vector" d="M0,0H33.524V33.524H0Z" transform="translate(33.524 33.524) rotate(180)" fill="none" opacity="0"/>
+  </g>
+</svg>

src/assets/icons/white-right-arrow.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="37.14" height="37.14" viewBox="0 0 37.14 37.14">
+  <g id="vuesax_linear_arrow-left" data-name="vuesax/linear/arrow-left" transform="translate(401.14 289.14) rotate(180)">
+    <g id="arrow-left" transform="translate(364 252)">
+      <path id="Vector" d="M10.983,24.512.894,14.423a3.073,3.073,0,0,1,0-4.333L10.983,0" transform="translate(12.229 6.314)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+      <path id="Vector-2" data-name="Vector" d="M0,0H37.14V37.14H0Z" transform="translate(37.14 37.14) rotate(180)" fill="none" opacity="0"/>
+    </g>
+  </g>
+</svg>

src/assets/icons/white-upward-arrow.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="28.755" height="14.605" viewBox="0 0 28.755 14.605">
+  <path id="Vector" d="M10.983,24.512.894,14.423a3.073,3.073,0,0,1,0-4.333L10.983,0" transform="translate(26.634 1.5) rotate(90)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+</svg>

src/components/buttonDesign/ButtonDesign.js

@@ -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;

tailwind.config.js

@@ -4,6 +4,7 @@ module.exports = {
     extend: {},
     textColor: (theme) => ({
       ...theme("colors"),
+      // used in ProductDesign Component
       discountPriceTitle: "#4ACA53",
       productTitle: "#246E8A",
       productContent: "#707070",
@@ -16,14 +17,26 @@ module.exports = {
       selectColor2: "#89ECFF",
       selectColor3: "#FC5353",
       selectColor4: "#FCF653",
+      // used in ButtonDesign Component
+      moreInfoButtonTextColor: "#06BACE",
+      cancleButtonTextColor: "#646464",
     }),
     backgroundColor: (theme) => ({
       ...theme("colors"),
+      // used in ProductDesign Component
       productTagBg: "#E1FAFF",
       likeBtnBg: "#FFF3F3",
       discountPriceBg: "#F0FFF1",
       counterBg: "#66B1EB",
       incrementDecrementBg: "#2E7AB5",
+      // used in ButtonDesign Component
+      moreInfoButtonBg: "#038A99",
+      cancleButtonBg: "#DBDBDB",
+    }),
+    borderColor: (theme) => ({
+      ...theme("colors"),
+      // used in ButtonDesign Component
+      moreInfoButtonBorderColor: "#06BACE",
     }),
   },
   plugins: [],