diff --git a/bt/theme1/filled/button.css b/bt/theme1/filled/button.css
new file mode 100644
index 0000000..e9636fd
--- /dev/null
+++ b/bt/theme1/filled/button.css
@@ -0,0 +1,46 @@
+.ripple-button {
+    border-radius: 30px;
+    border: 1px solid;
+    margin: 8px;
+    padding: 5px 20px;
+    background: #81aedc;
+    color: #f0f5fb;
+    border-color: #89a8c9;
+    overflow: hidden;
+    position: relative;
+    gap: 10px;
+  }
+
+.ripple-button:hover{
+    background-color: #5287bd;
+    border-color: #485e77;
+}
+  
+  .ripple-button > .ripple {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    background: #7aa0c5;
+    display: block;
+    content: "";
+    border-radius: 9999px;
+    opacity: 1;
+    animation: 0.9s ease 1 forwards ripple-effect;
+  }
+  
+  @keyframes ripple-effect {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(10);
+      opacity: 0.375;
+    }
+    100% {
+      transform: scale(35);
+      opacity: 0;
+    }
+  }
+  
+  
\ No newline at end of file
diff --git a/bt/theme1/filled/button.jsx b/bt/theme1/filled/button.jsx
new file mode 100644
index 0000000..528c818
--- /dev/null
+++ b/bt/theme1/filled/button.jsx
@@ -0,0 +1,61 @@
+import React from "react";
+import './button.css';
+
+export default function Theme1filled({ onClick }) {
+  const [coords, setCoords] = React.useState({ x: -1, y: -1 });
+  const [isRippling, setIsRippling] = React.useState(false);
+  const [isDisabled, setIsDisabled] = React.useState(false);
+  const [backgroundColor, setBackgroundColor] = React.useState('');
+  const [textColor, setTextColor] = React.useState(''); // New state for text color
+  const [borderColor, setBorderColor] = React.useState(''); // New state for border color
+
+  React.useEffect(() => {
+    if (coords.x !== -1 && coords.y !== -1) {
+      setIsRippling(true);
+
+      setTimeout(() => {
+        setIsRippling(false);
+        setIsDisabled(true);
+        setBackgroundColor('#415469');
+        setTextColor('#8c97a4'); // Change text color
+        setBorderColor('#404955'); // Change border color
+      }, 300);
+    } else {
+      setIsRippling(false);
+    }
+  }, [coords]);
+
+  React.useEffect(() => {
+    if (!isRippling) {
+      setCoords({ x: -1, y: -1 });
+    }
+  }, [isRippling]);
+
+  return (
+    <button
+      className="ripple-button"
+      onClick={(e) => {
+        if (!isDisabled) {
+          const rect = e.target.getBoundingClientRect();
+          setCoords({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+          onClick && onClick(e);
+        }
+      }}
+      disabled={isDisabled}
+      style={{ backgroundColor, color: textColor, borderColor }} // Apply the new styles
+    >
+      {isRippling ? (
+        <span
+          className="ripple"
+          style={{
+            left: coords.x,
+            top: coords.y,
+          }}
+        />
+      ) : (
+        ''
+      )}
+      Button
+    </button>
+  );
+};
diff --git a/bt/theme1/ghost/button.css b/bt/theme1/ghost/button.css
new file mode 100644
index 0000000..d978386
--- /dev/null
+++ b/bt/theme1/ghost/button.css
@@ -0,0 +1,46 @@
+.ripple-button {
+    border-radius: 30px;
+    border: 1px solid;
+    margin: 8px;
+    padding: 5px 20px;
+    background: #212630;
+    color: #7ba5d1;
+    border-color: #212630;
+    overflow: hidden;
+    position: relative;
+    gap: 10px;
+  }
+
+.ripple-button:hover{
+    background-color: #212630;
+    border-color: #2b3340;
+}
+  
+  .ripple-button > .ripple {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    background: #212630;
+    display: block;
+    content: "";
+    border-radius: 9999px;
+    opacity: 1;
+    animation: 0.9s ease 1 forwards ripple-effect;
+  }
+  
+  @keyframes ripple-effect {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(10);
+      opacity: 0.375;
+    }
+    100% {
+      transform: scale(35);
+      opacity: 0;
+    }
+  }
+  
+  
\ No newline at end of file
diff --git a/bt/theme1/ghost/button.jsx b/bt/theme1/ghost/button.jsx
new file mode 100644
index 0000000..4edfa8e
--- /dev/null
+++ b/bt/theme1/ghost/button.jsx
@@ -0,0 +1,61 @@
+import React from "react";
+import './button.css';
+
+export default function Theme1ghost({ onClick }) {
+  const [coords, setCoords] = React.useState({ x: -1, y: -1 });
+  const [isRippling, setIsRippling] = React.useState(false);
+  const [isDisabled, setIsDisabled] = React.useState(false);
+  const [backgroundColor, setBackgroundColor] = React.useState('');
+  const [textColor, setTextColor] = React.useState(''); // New state for text color
+  const [borderColor, setBorderColor] = React.useState(''); // New state for border color
+
+  React.useEffect(() => {
+    if (coords.x !== -1 && coords.y !== -1) {
+      setIsRippling(true);
+
+      setTimeout(() => {
+        setIsRippling(false);
+        setIsDisabled(true);
+        setBackgroundColor('#212630');
+        setTextColor('#41536a'); // Change text color
+        setBorderColor('#212630'); // Change border color
+      }, 300);
+    } else {
+      setIsRippling(false);
+    }
+  }, [coords]);
+
+  React.useEffect(() => {
+    if (!isRippling) {
+      setCoords({ x: -1, y: -1 });
+    }
+  }, [isRippling]);
+
+  return (
+    <button
+      className="ripple-button"
+      onClick={(e) => {
+        if (!isDisabled) {
+          const rect = e.target.getBoundingClientRect();
+          setCoords({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+          onClick && onClick(e);
+        }
+      }}
+      disabled={isDisabled}
+      style={{ backgroundColor, color: textColor, borderColor }} // Apply the new styles
+    >
+      {isRippling ? (
+        <span
+          className="ripple"
+          style={{
+            left: coords.x,
+            top: coords.y,
+          }}
+        />
+      ) : (
+        ''
+      )}
+      Button
+    </button>
+  );
+};
diff --git a/bt/theme1/link/button.css b/bt/theme1/link/button.css
new file mode 100644
index 0000000..aeba4e1
--- /dev/null
+++ b/bt/theme1/link/button.css
@@ -0,0 +1,53 @@
+.ripple-button {
+    border-radius: 30px;
+    border: 1px solid;
+    margin: 8px;
+    padding: 5px 20px;
+    background: #16171d;
+    color: #6d92b8;
+    border-color: #16171d;
+    overflow: hidden;
+    position: relative;
+    gap: 10px;
+  }
+
+.ripple-button:hover{
+    background-color: #16171d;
+    border-color: #16171d;
+    text-decoration: underline;
+}
+  
+  .ripple-button > .ripple {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    background: #16171d;
+    display: block;
+    content: "";
+    border-radius: 9999px;
+    opacity: 1;
+    animation: 0.9s ease 1 forwards ripple-effect;
+    text-decoration: underline;
+  }
+  
+  @keyframes ripple-effect {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(10);
+      opacity: 0.375;
+    }
+    100% {
+      transform: scale(35);
+      opacity: 0;
+    }
+  }
+  
+  .ripple-button > .content {
+    position: relative;
+    z-index: 2;
+    color: white;
+    background-color: transparent;
+  }
\ No newline at end of file
diff --git a/bt/theme1/link/button.jsx b/bt/theme1/link/button.jsx
new file mode 100644
index 0000000..e06656e
--- /dev/null
+++ b/bt/theme1/link/button.jsx
@@ -0,0 +1,61 @@
+import React from "react";
+import './button.css';
+
+export default function Theme1link({ onClick }) {
+  const [coords, setCoords] = React.useState({ x: -1, y: -1 });
+  const [isRippling, setIsRippling] = React.useState(false);
+  const [isDisabled, setIsDisabled] = React.useState(false);
+  const [backgroundColor, setBackgroundColor] = React.useState('');
+  const [textColor, setTextColor] = React.useState(''); // New state for text color
+  const [borderColor, setBorderColor] = React.useState(''); // New state for border color
+
+  React.useEffect(() => {
+    if (coords.x !== -1 && coords.y !== -1) {
+      setIsRippling(true);
+
+      setTimeout(() => {
+        setIsRippling(false);
+        setIsDisabled(true);
+        setBackgroundColor('#16171d');
+        setTextColor('#2a3340'); // Change text color
+        setBorderColor('#16171d'); // Change border color
+      }, 300);
+    } else {
+      setIsRippling(false);
+    }
+  }, [coords]);
+
+  React.useEffect(() => {
+    if (!isRippling) {
+      setCoords({ x: -1, y: -1 });
+    }
+  }, [isRippling]);
+
+  return (
+    <button
+      className="ripple-button"
+      onClick={(e) => {
+        if (!isDisabled) {
+          const rect = e.target.getBoundingClientRect();
+          setCoords({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+          onClick && onClick(e);
+        }
+      }}
+      disabled={isDisabled}
+      style={{ backgroundColor, color: textColor, borderColor }} // Apply the new styles
+    >
+      {isRippling ? (
+        <span
+          className="ripple"
+          style={{
+            left: coords.x,
+            top: coords.y,
+          }}
+        />
+      ) : (
+        ''
+      )}
+      Button
+    </button>
+  );
+};
diff --git a/bt/theme1/outlined/button.css b/bt/theme1/outlined/button.css
new file mode 100644
index 0000000..f898e0e
--- /dev/null
+++ b/bt/theme1/outlined/button.css
@@ -0,0 +1,51 @@
+.ripple-button {
+    border-radius: 30px;
+    border: 1px solid;
+    margin: 8px;
+    padding: 5px 20px;
+    background: #16171d;
+    color: #516a86;
+    border-color: #7197bf;
+    overflow: hidden;
+    position: relative;
+    gap: 10px;
+  }
+
+.ripple-button:hover{
+    background-color: #212630;
+    border-color: #6d91b8;
+}
+  
+  .ripple-button > .ripple {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    background: #16171d;
+    display: block;
+    content: "";
+    border-radius: 9999px;
+    opacity: 1;
+    animation: 0.9s ease 1 forwards ripple-effect;
+  }
+  
+  @keyframes ripple-effect {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(10);
+      opacity: 0.375;
+    }
+    100% {
+      transform: scale(35);
+      opacity: 0;
+    }
+  }
+  
+  .ripple-button > .content {
+    position: relative;
+    z-index: 2;
+    color: white;
+    background-color: transparent;
+  }
\ No newline at end of file
diff --git a/bt/theme1/outlined/button.jsx b/bt/theme1/outlined/button.jsx
new file mode 100644
index 0000000..5cf5ac6
--- /dev/null
+++ b/bt/theme1/outlined/button.jsx
@@ -0,0 +1,61 @@
+import React from "react";
+import './button.css';
+
+export default function Theme1outlined({ onClick }) {
+  const [coords, setCoords] = React.useState({ x: -1, y: -1 });
+  const [isRippling, setIsRippling] = React.useState(false);
+  const [isDisabled, setIsDisabled] = React.useState(false);
+  const [backgroundColor, setBackgroundColor] = React.useState('');
+  const [textColor, setTextColor] = React.useState(''); // New state for text color
+  const [borderColor, setBorderColor] = React.useState(''); // New state for border color
+
+  React.useEffect(() => {
+    if (coords.x !== -1 && coords.y !== -1) {
+      setIsRippling(true);
+
+      setTimeout(() => {
+        setIsRippling(false);
+        setIsDisabled(true);
+        setBackgroundColor('#16171d');
+        setTextColor('#3f5065'); // Change text color
+        setBorderColor('#384659'); // Change border color
+      }, 300);
+    } else {
+      setIsRippling(false);
+    }
+  }, [coords]);
+
+  React.useEffect(() => {
+    if (!isRippling) {
+      setCoords({ x: -1, y: -1 });
+    }
+  }, [isRippling]);
+
+  return (
+    <button
+      className="ripple-button"
+      onClick={(e) => {
+        if (!isDisabled) {
+          const rect = e.target.getBoundingClientRect();
+          setCoords({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+          onClick && onClick(e);
+        }
+      }}
+      disabled={isDisabled}
+      style={{ backgroundColor, color: textColor, borderColor }} // Apply the new styles
+    >
+      {isRippling ? (
+        <span
+          className="ripple"
+          style={{
+            left: coords.x,
+            top: coords.y,
+          }}
+        />
+      ) : (
+        ''
+      )}
+      Button
+    </button>
+  );
+};
diff --git a/bt/theme1/text/button.css b/bt/theme1/text/button.css
new file mode 100644
index 0000000..452792a
--- /dev/null
+++ b/bt/theme1/text/button.css
@@ -0,0 +1,51 @@
+.ripple-button {
+    border-radius: 30px;
+    border: 1px solid;
+    margin: 8px;
+    padding: 5px 20px;
+    background: #16171d;
+    color: #6d92b8;
+    border-color: #16171d;
+    overflow: hidden;
+    position: relative;
+    gap: 10px;
+  }
+
+.ripple-button:hover{
+    background-color: #212630;
+    border-color: #212630;
+}
+  
+  .ripple-button > .ripple {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    background: #7aa0c5;
+    display: block;
+    content: "";
+    border-radius: 9999px;
+    opacity: 1;
+    animation: 0.9s ease 1 forwards ripple-effect;
+  }
+  
+  @keyframes ripple-effect {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(10);
+      opacity: 0.375;
+    }
+    100% {
+      transform: scale(35);
+      opacity: 0;
+    }
+  }
+  
+  .ripple-button > .content {
+    position: relative;
+    z-index: 2;
+    color: white;
+    background-color: transparent;
+  }
\ No newline at end of file
diff --git a/bt/theme1/text/button.jsx b/bt/theme1/text/button.jsx
new file mode 100644
index 0000000..3fc8ec5
--- /dev/null
+++ b/bt/theme1/text/button.jsx
@@ -0,0 +1,61 @@
+import React from "react";
+import './button.css';
+
+export default function Theme1text({ onClick }) {
+  const [coords, setCoords] = React.useState({ x: -1, y: -1 });
+  const [isRippling, setIsRippling] = React.useState(false);
+  const [isDisabled, setIsDisabled] = React.useState(false);
+  const [backgroundColor, setBackgroundColor] = React.useState('');
+  const [textColor, setTextColor] = React.useState(''); // New state for text color
+  const [borderColor, setBorderColor] = React.useState(''); // New state for border color
+
+  React.useEffect(() => {
+    if (coords.x !== -1 && coords.y !== -1) {
+      setIsRippling(true);
+
+      setTimeout(() => {
+        setIsRippling(false);
+        setIsDisabled(true);
+        setBackgroundColor('#16171d');
+        setTextColor('#3f5066'); // Change text color
+        setBorderColor('#16171d'); // Change border color
+      }, 300);
+    } else {
+      setIsRippling(false);
+    }
+  }, [coords]);
+
+  React.useEffect(() => {
+    if (!isRippling) {
+      setCoords({ x: -1, y: -1 });
+    }
+  }, [isRippling]);
+
+  return (
+    <button
+      className="ripple-button"
+      onClick={(e) => {
+        if (!isDisabled) {
+          const rect = e.target.getBoundingClientRect();
+          setCoords({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+          onClick && onClick(e);
+        }
+      }}
+      disabled={isDisabled}
+      style={{ backgroundColor, color: textColor, borderColor }} // Apply the new styles
+    >
+      {isRippling ? (
+        <span
+          className="ripple"
+          style={{
+            left: coords.x,
+            top: coords.y,
+          }}
+        />
+      ) : (
+        ''
+      )}
+      Button
+    </button>
+  );
+};
diff --git a/bt/theme2/filled/button.css b/bt/theme2/filled/button.css
new file mode 100644
index 0000000..d1625ce
--- /dev/null
+++ b/bt/theme2/filled/button.css
@@ -0,0 +1,46 @@
+.ripple-button {
+    border-radius: 30px;
+    border: 1px solid;
+    margin: 8px;
+    padding: 5px 20px;
+    background: #ffffff;
+    color: #262626;
+    border-color: #ffffff;
+    overflow: hidden;
+    position: relative;
+    gap: 10px;
+  }
+
+.ripple-button:hover{
+    background-color: #cecece;
+    border-color: #b1b1b3;
+}
+  
+  .ripple-button > .ripple {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    background: #dddddd;
+    display: block;
+    content: "";
+    border-radius: 9999px;
+    opacity: 1;
+    animation: 0.9s ease 1 forwards ripple-effect;
+  }
+  
+  @keyframes ripple-effect {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(10);
+      opacity: 0.375;
+    }
+    100% {
+      transform: scale(35);
+      opacity: 0;
+    }
+  }
+  
+  
\ No newline at end of file
diff --git a/bt/theme2/filled/button.jsx b/bt/theme2/filled/button.jsx
new file mode 100644
index 0000000..e3763d4
--- /dev/null
+++ b/bt/theme2/filled/button.jsx
@@ -0,0 +1,61 @@
+import React from "react";
+import './button.css';
+
+export default function Theme2filled({ onClick }) {
+  const [coords, setCoords] = React.useState({ x: -1, y: -1 });
+  const [isRippling, setIsRippling] = React.useState(false);
+  const [isDisabled, setIsDisabled] = React.useState(false);
+  const [backgroundColor, setBackgroundColor] = React.useState('');
+  const [textColor, setTextColor] = React.useState(''); // New state for text color
+  const [borderColor, setBorderColor] = React.useState(''); // New state for border color
+
+  React.useEffect(() => {
+    if (coords.x !== -1 && coords.y !== -1) {
+      setIsRippling(true);
+
+      setTimeout(() => {
+        setIsRippling(false);
+        setIsDisabled(true);
+        setBackgroundColor('#737477');
+        setTextColor('#4a494f'); // Change text color
+        setBorderColor('#838487'); // Change border color
+      }, 300);
+    } else {
+      setIsRippling(false);
+    }
+  }, [coords]);
+
+  React.useEffect(() => {
+    if (!isRippling) {
+      setCoords({ x: -1, y: -1 });
+    }
+  }, [isRippling]);
+
+  return (
+    <button
+      className="ripple-button"
+      onClick={(e) => {
+        if (!isDisabled) {
+          const rect = e.target.getBoundingClientRect();
+          setCoords({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+          onClick && onClick(e);
+        }
+      }}
+      disabled={isDisabled}
+      style={{ backgroundColor, color: textColor, borderColor }} // Apply the new styles
+    >
+      {isRippling ? (
+        <span
+          className="ripple"
+          style={{
+            left: coords.x,
+            top: coords.y,
+          }}
+        />
+      ) : (
+        ''
+      )}
+      Button
+    </button>
+  );
+};
diff --git a/bt/theme2/ghost/button.css b/bt/theme2/ghost/button.css
new file mode 100644
index 0000000..3c8ec40
--- /dev/null
+++ b/bt/theme2/ghost/button.css
@@ -0,0 +1,46 @@
+.ripple-button {
+    border-radius: 30px;
+    border: 1px solid;
+    margin: 8px;
+    padding: 5px 20px;
+    background: #2d2e34;
+    color: #e2e2e3;
+    border-color: #2d2e34;
+    overflow: hidden;
+    position: relative;
+    gap: 10px;
+  }
+
+.ripple-button:hover{
+    background-color: #2d2e34;
+    border-color: #414247;
+}
+  
+  .ripple-button > .ripple {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    background: #2d2e34;
+    display: block;
+    content: "";
+    border-radius: 9999px;
+    opacity: 1;
+    animation: 0.9s ease 1 forwards ripple-effect;
+  }
+  
+  @keyframes ripple-effect {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(10);
+      opacity: 0.375;
+    }
+    100% {
+      transform: scale(35);
+      opacity: 0;
+    }
+  }
+  
+  
\ No newline at end of file
diff --git a/bt/theme2/ghost/button.jsx b/bt/theme2/ghost/button.jsx
new file mode 100644
index 0000000..a2855a3
--- /dev/null
+++ b/bt/theme2/ghost/button.jsx
@@ -0,0 +1,61 @@
+import React from "react";
+import './button.css';
+
+export default function Theme2ghost({ onClick }) {
+  const [coords, setCoords] = React.useState({ x: -1, y: -1 });
+  const [isRippling, setIsRippling] = React.useState(false);
+  const [isDisabled, setIsDisabled] = React.useState(false);
+  const [backgroundColor, setBackgroundColor] = React.useState('');
+  const [textColor, setTextColor] = React.useState(''); // New state for text color
+  const [borderColor, setBorderColor] = React.useState(''); // New state for border color
+
+  React.useEffect(() => {
+    if (coords.x !== -1 && coords.y !== -1) {
+      setIsRippling(true);
+
+      setTimeout(() => {
+        setIsRippling(false);
+        setIsDisabled(true);
+        setBackgroundColor('#2d2e34');
+        setTextColor('#7b7c80'); // Change text color
+        setBorderColor('#24252b'); // Change border color
+      }, 300);
+    } else {
+      setIsRippling(false);
+    }
+  }, [coords]);
+
+  React.useEffect(() => {
+    if (!isRippling) {
+      setCoords({ x: -1, y: -1 });
+    }
+  }, [isRippling]);
+
+  return (
+    <button
+      className="ripple-button"
+      onClick={(e) => {
+        if (!isDisabled) {
+          const rect = e.target.getBoundingClientRect();
+          setCoords({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+          onClick && onClick(e);
+        }
+      }}
+      disabled={isDisabled}
+      style={{ backgroundColor, color: textColor, borderColor }} // Apply the new styles
+    >
+      {isRippling ? (
+        <span
+          className="ripple"
+          style={{
+            left: coords.x,
+            top: coords.y,
+          }}
+        />
+      ) : (
+        ''
+      )}
+      Button
+    </button>
+  );
+};
diff --git a/bt/theme2/link/button.css b/bt/theme2/link/button.css
new file mode 100644
index 0000000..b2200ea
--- /dev/null
+++ b/bt/theme2/link/button.css
@@ -0,0 +1,53 @@
+.ripple-button {
+    border-radius: 30px;
+    border: 1px solid;
+    margin: 8px;
+    padding: 5px 20px;
+    background: #16171d;
+    color: #eaeaea;
+    border-color: #16171d;
+    overflow: hidden;
+    position: relative;
+    gap: 10px;
+  }
+
+.ripple-button:hover{
+    background-color: #16171d;
+    border-color: #16171d;
+    text-decoration: underline;
+}
+  
+  .ripple-button > .ripple {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    background: #16171d;
+    display: block;
+    content: "";
+    border-radius: 9999px;
+    opacity: 1;
+    animation: 0.9s ease 1 forwards ripple-effect;
+    text-decoration: underline;
+  }
+  
+  @keyframes ripple-effect {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(10);
+      opacity: 0.375;
+    }
+    100% {
+      transform: scale(35);
+      opacity: 0;
+    }
+  }
+  
+  .ripple-button > .content {
+    position: relative;
+    z-index: 2;
+    color: white;
+    background-color: transparent;
+  }
\ No newline at end of file
diff --git a/bt/theme2/link/button.jsx b/bt/theme2/link/button.jsx
new file mode 100644
index 0000000..bc4c74f
--- /dev/null
+++ b/bt/theme2/link/button.jsx
@@ -0,0 +1,61 @@
+import React from "react";
+import './button.css';
+
+export default function Theme2link({ onClick }) {
+  const [coords, setCoords] = React.useState({ x: -1, y: -1 });
+  const [isRippling, setIsRippling] = React.useState(false);
+  const [isDisabled, setIsDisabled] = React.useState(false);
+  const [backgroundColor, setBackgroundColor] = React.useState('');
+  const [textColor, setTextColor] = React.useState(''); // New state for text color
+  const [borderColor, setBorderColor] = React.useState(''); // New state for border color
+
+  React.useEffect(() => {
+    if (coords.x !== -1 && coords.y !== -1) {
+      setIsRippling(true);
+
+      setTimeout(() => {
+        setIsRippling(false);
+        setIsDisabled(true);
+        setBackgroundColor('#16171d');
+        setTextColor('#6e6f72'); // Change text color
+        setBorderColor('#16171d'); // Change border color
+      }, 300);
+    } else {
+      setIsRippling(false);
+    }
+  }, [coords]);
+
+  React.useEffect(() => {
+    if (!isRippling) {
+      setCoords({ x: -1, y: -1 });
+    }
+  }, [isRippling]);
+
+  return (
+    <button
+      className="ripple-button"
+      onClick={(e) => {
+        if (!isDisabled) {
+          const rect = e.target.getBoundingClientRect();
+          setCoords({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+          onClick && onClick(e);
+        }
+      }}
+      disabled={isDisabled}
+      style={{ backgroundColor, color: textColor, borderColor }} // Apply the new styles
+    >
+      {isRippling ? (
+        <span
+          className="ripple"
+          style={{
+            left: coords.x,
+            top: coords.y,
+          }}
+        />
+      ) : (
+        ''
+      )}
+      Button
+    </button>
+  );
+};
diff --git a/bt/theme2/outlined/button.css b/bt/theme2/outlined/button.css
new file mode 100644
index 0000000..a41eba4
--- /dev/null
+++ b/bt/theme2/outlined/button.css
@@ -0,0 +1,51 @@
+.ripple-button {
+    border-radius: 30px;
+    border: 1px solid;
+    margin: 8px;
+    padding: 5px 20px;
+    background: #16171d;
+    color: #f9f9f9;
+    border-color: #6b6b6f;
+    overflow: hidden;
+    position: relative;
+    gap: 10px;
+  }
+
+.ripple-button:hover{
+    background-color:#404147;
+    border-color: #6d91b8;
+}
+  
+  .ripple-button > .ripple {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    background: #16171d;
+    display: block;
+    content: "";
+    border-radius: 9999px;
+    opacity: 1;
+    animation: 0.9s ease 1 forwards ripple-effect;
+  }
+  
+  @keyframes ripple-effect {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(10);
+      opacity: 0.375;
+    }
+    100% {
+      transform: scale(35);
+      opacity: 0;
+    }
+  }
+  
+  .ripple-button > .content {
+    position: relative;
+    z-index: 2;
+    color: white;
+    background-color: transparent;
+  }
\ No newline at end of file
diff --git a/bt/theme2/outlined/button.jsx b/bt/theme2/outlined/button.jsx
new file mode 100644
index 0000000..10f667f
--- /dev/null
+++ b/bt/theme2/outlined/button.jsx
@@ -0,0 +1,61 @@
+import React from "react";
+import './button.css';
+
+export default function Theme2outlined({ onClick }) {
+  const [coords, setCoords] = React.useState({ x: -1, y: -1 });
+  const [isRippling, setIsRippling] = React.useState(false);
+  const [isDisabled, setIsDisabled] = React.useState(false);
+  const [backgroundColor, setBackgroundColor] = React.useState('');
+  const [textColor, setTextColor] = React.useState(''); // New state for text color
+  const [borderColor, setBorderColor] = React.useState(''); // New state for border color
+
+  React.useEffect(() => {
+    if (coords.x !== -1 && coords.y !== -1) {
+      setIsRippling(true);
+
+      setTimeout(() => {
+        setIsRippling(false);
+        setIsDisabled(true);
+        setBackgroundColor('#16171d');
+        setTextColor('#626367'); // Change text color
+        setBorderColor('#545558'); // Change border color
+      }, 300);
+    } else {
+      setIsRippling(false);
+    }
+  }, [coords]);
+
+  React.useEffect(() => {
+    if (!isRippling) {
+      setCoords({ x: -1, y: -1 });
+    }
+  }, [isRippling]);
+
+  return (
+    <button
+      className="ripple-button"
+      onClick={(e) => {
+        if (!isDisabled) {
+          const rect = e.target.getBoundingClientRect();
+          setCoords({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+          onClick && onClick(e);
+        }
+      }}
+      disabled={isDisabled}
+      style={{ backgroundColor, color: textColor, borderColor }} // Apply the new styles
+    >
+      {isRippling ? (
+        <span
+          className="ripple"
+          style={{
+            left: coords.x,
+            top: coords.y,
+          }}
+        />
+      ) : (
+        ''
+      )}
+      Button
+    </button>
+  );
+};
diff --git a/bt/theme2/text/button.css b/bt/theme2/text/button.css
new file mode 100644
index 0000000..917b7f8
--- /dev/null
+++ b/bt/theme2/text/button.css
@@ -0,0 +1,51 @@
+.ripple-button {
+    border-radius: 30px;
+    border: 1px solid;
+    margin: 8px;
+    padding: 5px 20px;
+    background: #16171d;
+    color: #bbbbbd;
+    border-color: #16171d;
+    overflow: hidden;
+    position: relative;
+    gap: 10px;
+  }
+
+.ripple-button:hover{
+    background-color: #2d2e34;
+    border-color: #2d2e34;
+}
+  
+  .ripple-button > .ripple {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    background: #25262c;
+    display: block;
+    content: "";
+    border-radius: 9999px;
+    opacity: 1;
+    animation: 0.9s ease 1 forwards ripple-effect;
+  }
+  
+  @keyframes ripple-effect {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(10);
+      opacity: 0.375;
+    }
+    100% {
+      transform: scale(35);
+      opacity: 0;
+    }
+  }
+  
+  .ripple-button > .content {
+    position: relative;
+    z-index: 2;
+    color: white;
+    background-color: transparent;
+  }
\ No newline at end of file
diff --git a/bt/theme2/text/button.jsx b/bt/theme2/text/button.jsx
new file mode 100644
index 0000000..e198dfe
--- /dev/null
+++ b/bt/theme2/text/button.jsx
@@ -0,0 +1,61 @@
+import React from "react";
+import './button.css';
+
+export default function Theme2text({ onClick }) {
+  const [coords, setCoords] = React.useState({ x: -1, y: -1 });
+  const [isRippling, setIsRippling] = React.useState(false);
+  const [isDisabled, setIsDisabled] = React.useState(false);
+  const [backgroundColor, setBackgroundColor] = React.useState('');
+  const [textColor, setTextColor] = React.useState(''); // New state for text color
+  const [borderColor, setBorderColor] = React.useState(''); // New state for border color
+
+  React.useEffect(() => {
+    if (coords.x !== -1 && coords.y !== -1) {
+      setIsRippling(true);
+
+      setTimeout(() => {
+        setIsRippling(false);
+        setIsDisabled(true);
+        setBackgroundColor('#16171d');
+        setTextColor('#6e6f72'); // Change text color
+        setBorderColor('#16171d'); // Change border color
+      }, 300);
+    } else {
+      setIsRippling(false);
+    }
+  }, [coords]);
+
+  React.useEffect(() => {
+    if (!isRippling) {
+      setCoords({ x: -1, y: -1 });
+    }
+  }, [isRippling]);
+
+  return (
+    <button
+      className="ripple-button"
+      onClick={(e) => {
+        if (!isDisabled) {
+          const rect = e.target.getBoundingClientRect();
+          setCoords({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+          onClick && onClick(e);
+        }
+      }}
+      disabled={isDisabled}
+      style={{ backgroundColor, color: textColor, borderColor }} // Apply the new styles
+    >
+      {isRippling ? (
+        <span
+          className="ripple"
+          style={{
+            left: coords.x,
+            top: coords.y,
+          }}
+        />
+      ) : (
+        ''
+      )}
+      Button
+    </button>
+  );
+};
diff --git a/bt/theme3/filled/button.css b/bt/theme3/filled/button.css
new file mode 100644
index 0000000..174e8e9
--- /dev/null
+++ b/bt/theme3/filled/button.css
@@ -0,0 +1,46 @@
+.ripple-button {
+    border-radius: 30px;
+    border: 1px solid;
+    margin: 8px;
+    padding: 5px 20px;
+    background: #292929;
+    color: #fbfbfb;
+    border-color: #cdcdcd;
+    overflow: hidden;
+    position: relative;
+    gap: 10px;
+  }
+
+.ripple-button:hover{
+    background-color: #111111;
+    border-color: #d1d1d1;
+}
+  
+  .ripple-button > .ripple {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    background: #585858;
+    display: block;
+    content: "";
+    border-radius: 9999px;
+    opacity: 1;
+    animation: 0.9s ease 1 forwards ripple-effect;
+  }
+  
+  @keyframes ripple-effect {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(10);
+      opacity: 0.375;
+    }
+    100% {
+      transform: scale(35);
+      opacity: 0;
+    }
+  }
+  
+  
\ No newline at end of file
diff --git a/bt/theme3/filled/button.jsx b/bt/theme3/filled/button.jsx
new file mode 100644
index 0000000..5c3da37
--- /dev/null
+++ b/bt/theme3/filled/button.jsx
@@ -0,0 +1,61 @@
+import React from "react";
+import './button.css';
+
+export default function Theme3filled({ onClick }) {
+  const [coords, setCoords] = React.useState({ x: -1, y: -1 });
+  const [isRippling, setIsRippling] = React.useState(false);
+  const [isDisabled, setIsDisabled] = React.useState(false);
+  const [backgroundColor, setBackgroundColor] = React.useState('');
+  const [textColor, setTextColor] = React.useState(''); // New state for text color
+  const [borderColor, setBorderColor] = React.useState(''); // New state for border color
+
+  React.useEffect(() => {
+    if (coords.x !== -1 && coords.y !== -1) {
+      setIsRippling(true);
+
+      setTimeout(() => {
+        setIsRippling(false);
+        setIsDisabled(true);
+        setBackgroundColor('#878689');
+        setTextColor('#b4b4b5'); // Change text color
+        setBorderColor('#99989b'); // Change border color
+      }, 300);
+    } else {
+      setIsRippling(false);
+    }
+  }, [coords]);
+
+  React.useEffect(() => {
+    if (!isRippling) {
+      setCoords({ x: -1, y: -1 });
+    }
+  }, [isRippling]);
+
+  return (
+    <button
+      className="ripple-button"
+      onClick={(e) => {
+        if (!isDisabled) {
+          const rect = e.target.getBoundingClientRect();
+          setCoords({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+          onClick && onClick(e);
+        }
+      }}
+      disabled={isDisabled}
+      style={{ backgroundColor, color: textColor, borderColor }} // Apply the new styles
+    >
+      {isRippling ? (
+        <span
+          className="ripple"
+          style={{
+            left: coords.x,
+            top: coords.y,
+          }}
+        />
+      ) : (
+        ''
+      )}
+      Button
+    </button>
+  );
+};
diff --git a/bt/theme3/ghost/button.css b/bt/theme3/ghost/button.css
new file mode 100644
index 0000000..d30afd5
--- /dev/null
+++ b/bt/theme3/ghost/button.css
@@ -0,0 +1,46 @@
+.ripple-button {
+    border-radius: 30px;
+    border: 1px solid;
+    margin: 8px;
+    padding: 5px 20px;
+    background: #cdcdcd;
+    color: #151515;
+    border-color: #cdcdcd;
+    overflow: hidden;
+    position: relative;
+    gap: 10px;
+  }
+
+.ripple-button:hover{
+    background-color: #cdcdcd;
+    border-color: #acacac;
+}
+  
+  .ripple-button > .ripple {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    background: #cdcdcd;
+    display: block;
+    content: "";
+    border-radius: 9999px;
+    opacity: 1;
+    animation: 0.9s ease 1 forwards ripple-effect;
+  }
+  
+  @keyframes ripple-effect {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(10);
+      opacity: 0.375;
+    }
+    100% {
+      transform: scale(35);
+      opacity: 0;
+    }
+  }
+  
+  
\ No newline at end of file
diff --git a/bt/theme3/ghost/button.jsx b/bt/theme3/ghost/button.jsx
new file mode 100644
index 0000000..3b4cc72
--- /dev/null
+++ b/bt/theme3/ghost/button.jsx
@@ -0,0 +1,61 @@
+import React from "react";
+import './button.css';
+
+export default function Theme3ghost({ onClick }) {
+  const [coords, setCoords] = React.useState({ x: -1, y: -1 });
+  const [isRippling, setIsRippling] = React.useState(false);
+  const [isDisabled, setIsDisabled] = React.useState(false);
+  const [backgroundColor, setBackgroundColor] = React.useState('');
+  const [textColor, setTextColor] = React.useState(''); // New state for text color
+  const [borderColor, setBorderColor] = React.useState(''); // New state for border color
+
+  React.useEffect(() => {
+    if (coords.x !== -1 && coords.y !== -1) {
+      setIsRippling(true);
+
+      setTimeout(() => {
+        setIsRippling(false);
+        setIsDisabled(true);
+        setBackgroundColor('#cdcdcd');
+        setTextColor('#79787b'); // Change text color
+        setBorderColor('#cdcdcd'); // Change border color
+      }, 300);
+    } else {
+      setIsRippling(false);
+    }
+  }, [coords]);
+
+  React.useEffect(() => {
+    if (!isRippling) {
+      setCoords({ x: -1, y: -1 });
+    }
+  }, [isRippling]);
+
+  return (
+    <button
+      className="ripple-button"
+      onClick={(e) => {
+        if (!isDisabled) {
+          const rect = e.target.getBoundingClientRect();
+          setCoords({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+          onClick && onClick(e);
+        }
+      }}
+      disabled={isDisabled}
+      style={{ backgroundColor, color: textColor, borderColor }} // Apply the new styles
+    >
+      {isRippling ? (
+        <span
+          className="ripple"
+          style={{
+            left: coords.x,
+            top: coords.y,
+          }}
+        />
+      ) : (
+        ''
+      )}
+      Button
+    </button>
+  );
+};
diff --git a/bt/theme3/link/button.css b/bt/theme3/link/button.css
new file mode 100644
index 0000000..30f088b
--- /dev/null
+++ b/bt/theme3/link/button.css
@@ -0,0 +1,53 @@
+.ripple-button {
+    border-radius: 30px;
+    border: 1px solid;
+    margin: 8px;
+    padding: 5px 20px;
+    background: #f6f6f6;
+    color: #282828;
+    border-color: #f6f6f6;
+    overflow: hidden;
+    position: relative;
+    gap: 10px;
+  }
+
+.ripple-button:hover{
+    background-color: #f6f6f6;
+    border-color: #f6f6f6;
+    text-decoration: underline;
+}
+  
+  .ripple-button > .ripple {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    background: #f6f6f6;
+    display: block;
+    content: "";
+    border-radius: 9999px;
+    opacity: 1;
+    animation: 0.9s ease 1 forwards ripple-effect;
+    text-decoration: underline;
+  }
+  
+  @keyframes ripple-effect {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(10);
+      opacity: 0.375;
+    }
+    100% {
+      transform: scale(35);
+      opacity: 0;
+    }
+  }
+  
+  .ripple-button > .content {
+    position: relative;
+    z-index: 2;
+    color: white;
+    background-color: transparent;
+  }
\ No newline at end of file
diff --git a/bt/theme3/link/button.jsx b/bt/theme3/link/button.jsx
new file mode 100644
index 0000000..237739d
--- /dev/null
+++ b/bt/theme3/link/button.jsx
@@ -0,0 +1,61 @@
+import React from "react";
+import './button.css';
+
+export default function Theme3link({ onClick }) {
+  const [coords, setCoords] = React.useState({ x: -1, y: -1 });
+  const [isRippling, setIsRippling] = React.useState(false);
+  const [isDisabled, setIsDisabled] = React.useState(false);
+  const [backgroundColor, setBackgroundColor] = React.useState('');
+  const [textColor, setTextColor] = React.useState(''); // New state for text color
+  const [borderColor, setBorderColor] = React.useState(''); // New state for border color
+
+  React.useEffect(() => {
+    if (coords.x !== -1 && coords.y !== -1) {
+      setIsRippling(true);
+
+      setTimeout(() => {
+        setIsRippling(false);
+        setIsDisabled(true);
+        setBackgroundColor('#f6f6f6');
+        setTextColor('#8f8e90'); // Change text color
+        setBorderColor('#f6f6f6'); // Change border color
+      }, 300);
+    } else {
+      setIsRippling(false);
+    }
+  }, [coords]);
+
+  React.useEffect(() => {
+    if (!isRippling) {
+      setCoords({ x: -1, y: -1 });
+    }
+  }, [isRippling]);
+
+  return (
+    <button
+      className="ripple-button"
+      onClick={(e) => {
+        if (!isDisabled) {
+          const rect = e.target.getBoundingClientRect();
+          setCoords({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+          onClick && onClick(e);
+        }
+      }}
+      disabled={isDisabled}
+      style={{ backgroundColor, color: textColor, borderColor }} // Apply the new styles
+    >
+      {isRippling ? (
+        <span
+          className="ripple"
+          style={{
+            left: coords.x,
+            top: coords.y,
+          }}
+        />
+      ) : (
+        ''
+      )}
+      Button
+    </button>
+  );
+};
diff --git a/bt/theme3/outlined/button.css b/bt/theme3/outlined/button.css
new file mode 100644
index 0000000..086c0f6
--- /dev/null
+++ b/bt/theme3/outlined/button.css
@@ -0,0 +1,51 @@
+.ripple-button {
+    border-radius: 30px;
+    border: 1px solid;
+    margin: 8px;
+    padding: 5px 20px;
+    background: #f6f6f6;
+    color: #595959;
+    border-color: #858585;
+    overflow: hidden;
+    position: relative;
+    gap: 10px;
+  }
+
+.ripple-button:hover{
+    background-color: #cdcdcd;
+    border-color: #858585;
+}
+  
+  .ripple-button > .ripple {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    background: #f6f6f6;
+    display: block;
+    content: "";
+    border-radius: 9999px;
+    opacity: 1;
+    animation: 0.9s ease 1 forwards ripple-effect;
+  }
+  
+  @keyframes ripple-effect {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(10);
+      opacity: 0.375;
+    }
+    100% {
+      transform: scale(35);
+      opacity: 0;
+    }
+  }
+  
+  .ripple-button > .content {
+    position: relative;
+    z-index: 2;
+    color: white;
+    background-color: transparent;
+  }
\ No newline at end of file
diff --git a/bt/theme3/outlined/button.jsx b/bt/theme3/outlined/button.jsx
new file mode 100644
index 0000000..e3b0d10
--- /dev/null
+++ b/bt/theme3/outlined/button.jsx
@@ -0,0 +1,61 @@
+import React from "react";
+import './button.css';
+
+export default function Theme3outlined({ onClick }) {
+  const [coords, setCoords] = React.useState({ x: -1, y: -1 });
+  const [isRippling, setIsRippling] = React.useState(false);
+  const [isDisabled, setIsDisabled] = React.useState(false);
+  const [backgroundColor, setBackgroundColor] = React.useState('');
+  const [textColor, setTextColor] = React.useState(''); // New state for text color
+  const [borderColor, setBorderColor] = React.useState(''); // New state for border color
+
+  React.useEffect(() => {
+    if (coords.x !== -1 && coords.y !== -1) {
+      setIsRippling(true);
+
+      setTimeout(() => {
+        setIsRippling(false);
+        setIsDisabled(true);
+        setBackgroundColor('#f6f6f6');
+        setTextColor('#929194'); // Change text color
+        setBorderColor('#cdcdcd9'); // Change border color
+      }, 300);
+    } else {
+      setIsRippling(false);
+    }
+  }, [coords]);
+
+  React.useEffect(() => {
+    if (!isRippling) {
+      setCoords({ x: -1, y: -1 });
+    }
+  }, [isRippling]);
+
+  return (
+    <button
+      className="ripple-button"
+      onClick={(e) => {
+        if (!isDisabled) {
+          const rect = e.target.getBoundingClientRect();
+          setCoords({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+          onClick && onClick(e);
+        }
+      }}
+      disabled={isDisabled}
+      style={{ backgroundColor, color: textColor, borderColor }} // Apply the new styles
+    >
+      {isRippling ? (
+        <span
+          className="ripple"
+          style={{
+            left: coords.x,
+            top: coords.y,
+          }}
+        />
+      ) : (
+        ''
+      )}
+      Button
+    </button>
+  );
+};
diff --git a/bt/theme3/text/button.css b/bt/theme3/text/button.css
new file mode 100644
index 0000000..af8b687
--- /dev/null
+++ b/bt/theme3/text/button.css
@@ -0,0 +1,51 @@
+.ripple-button {
+    border-radius: 30px;
+    border: 1px solid;
+    margin: 8px;
+    padding: 5px 20px;
+    background: #f6f6f6;
+    color: #272727;
+    border-color: #f6f6f6;
+    overflow: hidden;
+    position: relative;
+    gap: 10px;
+  }
+
+.ripple-button:hover{
+    background-color: #cdcdcd;
+    border-color: #cdcdcd;
+}
+  
+  .ripple-button > .ripple {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    background: #f6f6f6;
+    display: block;
+    content: "";
+    border-radius: 9999px;
+    opacity: 1;
+    animation: 0.9s ease 1 forwards ripple-effect;
+  }
+  
+  @keyframes ripple-effect {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(10);
+      opacity: 0.375;
+    }
+    100% {
+      transform: scale(35);
+      opacity: 0;
+    }
+  }
+  
+  .ripple-button > .content {
+    position: relative;
+    z-index: 2;
+    color: white;
+    background-color: transparent;
+  }
\ No newline at end of file
diff --git a/bt/theme3/text/button.jsx b/bt/theme3/text/button.jsx
new file mode 100644
index 0000000..4ff4cf0
--- /dev/null
+++ b/bt/theme3/text/button.jsx
@@ -0,0 +1,61 @@
+import React from "react";
+import './button.css';
+
+export default function Theme3text({ onClick }) {
+  const [coords, setCoords] = React.useState({ x: -1, y: -1 });
+  const [isRippling, setIsRippling] = React.useState(false);
+  const [isDisabled, setIsDisabled] = React.useState(false);
+  const [backgroundColor, setBackgroundColor] = React.useState('');
+  const [textColor, setTextColor] = React.useState(''); // New state for text color
+  const [borderColor, setBorderColor] = React.useState(''); // New state for border color
+
+  React.useEffect(() => {
+    if (coords.x !== -1 && coords.y !== -1) {
+      setIsRippling(true);
+
+      setTimeout(() => {
+        setIsRippling(false);
+        setIsDisabled(true);
+        setBackgroundColor('#f6f6f6');
+        setTextColor('#908f91'); // Change text color
+        setBorderColor('#f6f6f6'); // Change border color
+      }, 300);
+    } else {
+      setIsRippling(false);
+    }
+  }, [coords]);
+
+  React.useEffect(() => {
+    if (!isRippling) {
+      setCoords({ x: -1, y: -1 });
+    }
+  }, [isRippling]);
+
+  return (
+    <button
+      className="ripple-button"
+      onClick={(e) => {
+        if (!isDisabled) {
+          const rect = e.target.getBoundingClientRect();
+          setCoords({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+          onClick && onClick(e);
+        }
+      }}
+      disabled={isDisabled}
+      style={{ backgroundColor, color: textColor, borderColor }} // Apply the new styles
+    >
+      {isRippling ? (
+        <span
+          className="ripple"
+          style={{
+            left: coords.x,
+            top: coords.y,
+          }}
+        />
+      ) : (
+        ''
+      )}
+      Button
+    </button>
+  );
+};
diff --git a/ic/1st/filled/button.css b/ic/1st/filled/button.css
new file mode 100644
index 0000000..57dd6dd
--- /dev/null
+++ b/ic/1st/filled/button.css
@@ -0,0 +1,50 @@
+.ripple-button {
+    border-radius: 30px;
+    border: 1px solid;
+    margin: 8px;
+    padding: 5px 20px ;
+    background: #81aedc;
+    color: #f0f5fb;
+    border-color: #89a8c9;
+    overflow: hidden;
+    position: relative;
+    gap: 10px;    
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+
+.ripple-button:hover{
+    background-color: #5287bd;
+    border-color: #485e77;
+}
+  
+  .ripple-button > .ripple {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    background: #7aa0c5;
+    display: block;
+    content: "";
+    border-radius: 9999px;
+    opacity: 1;
+    animation: 0.9s ease 1 forwards ripple-effect;
+  }
+  
+  @keyframes ripple-effect {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(10);
+      opacity: 0.375;
+    }
+    100% {
+      transform: scale(35);
+      opacity: 0;
+    }
+  }
+  
+  
\ No newline at end of file
diff --git a/ic/1st/filled/button.jsx b/ic/1st/filled/button.jsx
new file mode 100644
index 0000000..ec26d3c
--- /dev/null
+++ b/ic/1st/filled/button.jsx
@@ -0,0 +1,62 @@
+import React from "react";
+import './button.css';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+
+export default function Button1({ onClick }) {
+  const [coords, setCoords] = React.useState({ x: -1, y: -1 });
+  const [isRippling, setIsRippling] = React.useState(false);
+  const [isDisabled, setIsDisabled] = React.useState(false);
+  const [backgroundColor, setBackgroundColor] = React.useState('');
+  const [textColor, setTextColor] = React.useState(''); // New state for text color
+  const [borderColor, setBorderColor] = React.useState(''); // New state for border color
+
+  React.useEffect(() => {
+    if (coords.x !== -1 && coords.y !== -1) {
+      setIsRippling(true);
+
+      setTimeout(() => {
+        setIsRippling(false);
+        setIsDisabled(true);
+        setBackgroundColor('#415469');
+        setTextColor('#8c97a4'); // Change text color
+        setBorderColor('#404955'); // Change border color
+      }, 300);
+    } else {
+      setIsRippling(false);
+    }
+  }, [coords]);
+
+  React.useEffect(() => {
+    if (!isRippling) {
+      setCoords({ x: -1, y: -1 });
+    }
+  }, [isRippling]);
+
+  return (
+    <button
+      className="ripple-button"
+      onClick={(e) => {
+        if (!isDisabled) {
+          const rect = e.target.getBoundingClientRect();
+          setCoords({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+          onClick && onClick(e);
+        }
+      }}
+      disabled={isDisabled}
+      style={{ backgroundColor, color: textColor, borderColor }} // Apply the new styles
+    >
+      {isRippling ? (
+        <span
+          className="ripple"
+          style={{
+            left: coords.x,
+            top: coords.y,
+          }}
+        />
+      ) : (
+        ''
+      )}
+      Button<KeyboardArrowRightIcon/>
+    </button>
+  );
+};
diff --git a/ic/2nd/button.css b/ic/2nd/button.css
new file mode 100644
index 0000000..57dd6dd
--- /dev/null
+++ b/ic/2nd/button.css
@@ -0,0 +1,50 @@
+.ripple-button {
+    border-radius: 30px;
+    border: 1px solid;
+    margin: 8px;
+    padding: 5px 20px ;
+    background: #81aedc;
+    color: #f0f5fb;
+    border-color: #89a8c9;
+    overflow: hidden;
+    position: relative;
+    gap: 10px;    
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+
+.ripple-button:hover{
+    background-color: #5287bd;
+    border-color: #485e77;
+}
+  
+  .ripple-button > .ripple {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    background: #7aa0c5;
+    display: block;
+    content: "";
+    border-radius: 9999px;
+    opacity: 1;
+    animation: 0.9s ease 1 forwards ripple-effect;
+  }
+  
+  @keyframes ripple-effect {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(10);
+      opacity: 0.375;
+    }
+    100% {
+      transform: scale(35);
+      opacity: 0;
+    }
+  }
+  
+  
\ No newline at end of file
diff --git a/ic/2nd/button.jsx b/ic/2nd/button.jsx
new file mode 100644
index 0000000..350c5a0
--- /dev/null
+++ b/ic/2nd/button.jsx
@@ -0,0 +1,62 @@
+import React from "react";
+import './button.css';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+
+export default function Button2({ onClick }) {
+  const [coords, setCoords] = React.useState({ x: -1, y: -1 });
+  const [isRippling, setIsRippling] = React.useState(false);
+  const [isDisabled, setIsDisabled] = React.useState(false);
+  const [backgroundColor, setBackgroundColor] = React.useState('');
+  const [textColor, setTextColor] = React.useState(''); // New state for text color
+  const [borderColor, setBorderColor] = React.useState(''); // New state for border color
+
+  React.useEffect(() => {
+    if (coords.x !== -1 && coords.y !== -1) {
+      setIsRippling(true);
+
+      setTimeout(() => {
+        setIsRippling(false);
+        setIsDisabled(true);
+        setBackgroundColor('#415469');
+        setTextColor('#8c97a4'); // Change text color
+        setBorderColor('#404955'); // Change border color
+      }, 300);
+    } else {
+      setIsRippling(false);
+    }
+  }, [coords]);
+
+  React.useEffect(() => {
+    if (!isRippling) {
+      setCoords({ x: -1, y: -1 });
+    }
+  }, [isRippling]);
+
+  return (
+    <button
+      className="ripple-button"
+      onClick={(e) => {
+        if (!isDisabled) {
+          const rect = e.target.getBoundingClientRect();
+          setCoords({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+          onClick && onClick(e);
+        }
+      }}
+      disabled={isDisabled}
+      style={{ backgroundColor, color: textColor, borderColor }} // Apply the new styles
+    >
+      {isRippling ? (
+        <span
+          className="ripple"
+          style={{
+            left: coords.x,
+            top: coords.y,
+          }}
+        />
+      ) : (
+        ''
+      )}
+      <KeyboardArrowRightIcon/>Button
+    </button>
+  );
+};
diff --git a/ic/3rs/button.css b/ic/3rs/button.css
new file mode 100644
index 0000000..4179766
--- /dev/null
+++ b/ic/3rs/button.css
@@ -0,0 +1,46 @@
+.ripple-button {
+    border-radius: 30px;
+    border: 1px solid;
+    margin: 8px;
+    padding: 7.5px 10px ;
+    background: #81aedc;
+    color: #f0f5fb;
+    border-color: #89a8c9;
+    overflow: hidden;
+    position: relative;
+    gap: 10px;    
+  }
+
+.ripple-button:hover{
+    background-color: #5287bd;
+    border-color: #485e77;
+}
+  
+  .ripple-button > .ripple {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    background: #7aa0c5;
+    display: block;
+    content: "";
+    border-radius: 9999px;
+    opacity: 1;
+    animation: 0.9s ease 1 forwards ripple-effect;
+  }
+  
+  @keyframes ripple-effect {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(10);
+      opacity: 0.375;
+    }
+    100% {
+      transform: scale(35);
+      opacity: 0;
+    }
+  }
+  
+  
\ No newline at end of file
diff --git a/ic/3rs/button.jsx b/ic/3rs/button.jsx
new file mode 100644
index 0000000..ac828aa
--- /dev/null
+++ b/ic/3rs/button.jsx
@@ -0,0 +1,62 @@
+import React from "react";
+import './button.css';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+
+export default function Button3({ onClick }) {
+  const [coords, setCoords] = React.useState({ x: -1, y: -1 });
+  const [isRippling, setIsRippling] = React.useState(false);
+  const [isDisabled, setIsDisabled] = React.useState(false);
+  const [backgroundColor, setBackgroundColor] = React.useState('');
+  const [textColor, setTextColor] = React.useState(''); // New state for text color
+  const [borderColor, setBorderColor] = React.useState(''); // New state for border color
+
+  React.useEffect(() => {
+    if (coords.x !== -1 && coords.y !== -1) {
+      setIsRippling(true);
+
+      setTimeout(() => {
+        setIsRippling(false);
+        setIsDisabled(true);
+        setBackgroundColor('#415469');
+        setTextColor('#8c97a4'); // Change text color
+        setBorderColor('#404955'); // Change border color
+      }, 300);
+    } else {
+      setIsRippling(false);
+    }
+  }, [coords]);
+
+  React.useEffect(() => {
+    if (!isRippling) {
+      setCoords({ x: -1, y: -1 });
+    }
+  }, [isRippling]);
+
+  return (
+    <button
+      className="ripple-button"
+      onClick={(e) => {
+        if (!isDisabled) {
+          const rect = e.target.getBoundingClientRect();
+          setCoords({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+          onClick && onClick(e);
+        }
+      }}
+      disabled={isDisabled}
+      style={{ backgroundColor, color: textColor, borderColor }} // Apply the new styles
+    >
+      {isRippling ? (
+        <span
+          className="ripple"
+          style={{
+            left: coords.x,
+            top: coords.y,
+          }}
+        />
+      ) : (
+        ''
+      )}
+      <KeyboardArrowRightIcon/>
+    </button>
+  );
+};