next-app/app/components/link-button.tsx

'use client';
import { motion } from "framer-motion"
import { useState } from "react";

const LinkButton = ({text, href, onPress}: {text: string, href: string, onPress?: () => any}) => {
  const [buttonHovered, setButtonHovered] = useState( false );
  const [buttonPressed, setButtonPressed] = useState( false );
  return (
    <div className="mt-3 flex items-center justify-center gap-x-6 lg:justify-start">
    <motion.a
      href={href}  
      className="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
      style={{ marginBottom: '40px' }}
      animate={{opacity: buttonHovered ? 0.8 : 1}}
      onMouseEnter={()=>setButtonHovered(true)}
      onMouseLeave={()=>setButtonHovered(false)}
      onClick={()=>{setButtonPressed(true); onPress && onPress();}}
    >
      {text}
    </motion.a>
      
  </div>
  );
}

export default LinkButton;