31 lines
1.6 KiB
TypeScript
31 lines
1.6 KiB
TypeScript
|
import type { MouseEventHandler } from "react";
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
onClick?: MouseEventHandler<HTMLButtonElement>;
|
||
|
|
text?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function Button({ onClick, text }: Props) {
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
onClick={onClick}
|
||
|
|
className="group relative px-5 py-3 rounded-full overflow-hidden transition-all duration-300 hover:scale-105 active:scale-95 cursor-pointer mx-1"
|
||
|
|
>
|
||
|
|
<div className="absolute inset-0 bg-orange-500/10 backdrop-blur-xl border border-orange-400/30 rounded-full"></div>
|
||
|
|
|
||
|
|
<div className="absolute inset-0 bg-linear-to-br from-orange-400/20 via-orange-500/5 to-transparent rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||
|
|
|
||
|
|
<div className="absolute inset-0 bg-linear-to-r from-transparent via-orange-300/30 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000 rounded-full"></div>
|
||
|
|
|
||
|
|
<div className="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur-xl bg-orange-500/40"></div>
|
||
|
|
|
||
|
|
<div className="absolute inset-px rounded-full bg-linear-to-b from-orange-400/10 to-transparent"></div>
|
||
|
|
|
||
|
|
<span className="relative flex items-center gap-2 text-white font-medium text-lg font-vazirmatn">
|
||
|
|
{text}
|
||
|
|
<svg className="w-6 h-6 transition-transform group-hover:rotate-12 duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
|
||
|
|
</span>
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
}
|