27 lines
1.1 KiB
TypeScript
27 lines
1.1 KiB
TypeScript
import React from "react";
|
|
|
|
interface ButtonProps {
|
|
text: string;
|
|
className?: string;
|
|
}
|
|
|
|
const Button: React.FC<ButtonProps> = ({ text, className = "" }) => {
|
|
return (
|
|
<button
|
|
className={`group font-mium-reg text-b-2-17 bg-btn relative h-[52px] w-max min-w-40 cursor-pointer rounded-full px-6 py-2.5 text-center font-normal tracking-[-0.8px] text-white shadow-[inset_0_0_25px_#7ED38C,0_0_25px_rgba(126,211,140,0.6),0_0_50px_rgba(126,211,140,0.3)] transition-all duration-700 ease-[cubic-bezier(0.19,1,0.22,1)] hover:shadow-[inset_0_0_30px_#9CF1A5,0_0_35px_rgba(126,211,140,0.9),0_0_60px_rgba(126,211,140,0.7)] ${className} `}
|
|
>
|
|
{/* Smooth hover text animation */}
|
|
<span className="relative block overflow-hidden">
|
|
<span className="block transition-transform duration-[1.125s] ease-[cubic-bezier(0.19,1,0.22,1)] group-hover:-translate-y-6">
|
|
{text}
|
|
</span>
|
|
<span className="absolute top-6 left-0 transition-all duration-[1.125s] ease-[cubic-bezier(0.19,1,0.22,1)] group-hover:top-0">
|
|
{text}
|
|
</span>
|
|
</span>
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default Button;
|