Fastest-Coder-First · a-nnurag · Aug 30, 2023
diff --git a/bt/theme1/filled/button.css 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;
+    }
+  }
+
+
diff --git a/bt/theme1/filled/button.jsx 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
@@ -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;
+    }
+  }
+
+
diff --git a/bt/theme1/ghost/button.jsx 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
@@ -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;
+  }
diff --git a/bt/theme1/link/button.jsx 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
@@ -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;
+  }