diff options
Diffstat (limited to 'src/components/Button.tsx')
| -rw-r--r-- | src/components/Button.tsx | 16 |
1 files changed, 16 insertions, 0 deletions
diff --git a/src/components/Button.tsx b/src/components/Button.tsx new file mode 100644 index 0000000..b12b833 --- /dev/null +++ b/src/components/Button.tsx @@ -0,0 +1,16 @@ +import React from "react"; +//import { Link } from "react-router-dom"; + +type ButtonProps = {link: React.ReactElement, width?: number, height?: number, spinner?: number}; +export default function Button ({ link , width = 36, height = 16, spinner = 4 }: ButtonProps) +{ + return ( + <> + <div className={`w-${ width } h-${ height } relative grid rounded-[5px] cursor-pointer overflow-hidden place-items-center before:content-[''] before:absolute before:w-${ spinner } before:bg-amber-400 before:rotate-[32deg] before:h-[1%] before:transition-all before:duration-500 before:ease-linear before:animate-[buttonSpin_1.5s_linear_infinite] hover:before:h-[2800%] hover:before:transition-all hover:before:duration-0 hover:before:ease-linear after:absolute after:content-[''] after:bg-stone-800 after:rounded-[5px] after:inset-0 after:transition-all after:duration-200 after:ease-in-out hover:after:inset-[5px] hover:after:transition-all hover:after:duration-200 hover:after:ease-in-out`}> +<div className="z-[3]"> + { link } + </div> + </div> + </> + ); +} |