Button and hover effect not working in react js project

Question

Buttons and hover effect is not working in laptop screen when I go to mobile responsive all buttons and hover effect work properly and also hyperlink not working Please help ?

<div className='md:pl-0 pl-[20px]'>
                    <button
                    onClick={navigate('/contactus')}
                        className='w-[218px] h-[56px] relative inline-flex   bg-[#FE6910] hover:bg-[#FE6910]/80 duration-300 justify-evenly items-center md:mt-[56px] mt-[20px]'>
                        <div
                            className="absolute transitiona-all duration-1000 opacity-70 -inset-px bg-gradient-to-r from-[#FE6910] via-[#FE6910] to-[#FE6910]/70 rounded-xl blur-lg group-hover:opacity-100 group-hover:-inset-1 group-hover:duration-200 animate-tilt">
                        </div>
                        <div className=' gap-[30px] relative inline-flex items-center justify-center    font-bold text-white transition-all duration-200    focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900'>
                            <p className='text-[17px] font-roboto font-medium text-white '>Contact Us</p>
                            <BsArrowRight size={30} className='text-white ' />

                        </div>
                    </button>
- -                 </div>

Answer 1

How're you doing? Since you haven't posted details of your classnames, I cannot help with your hover effect problem. But, with your navigation, you should provide a callback function to onClick property of your button. I mean, something like this:

<button onClick={() => navigate('/contactus')}>
  [ELEMENTS INSIDE BUTTON]
</button>

You can also use the Link element of react-router-dom like this:

<Link to="/contactus">
  <button>
    [ELEMENTS INSIDE BUTTON]
  </button>
</Link>

Second alternative is a better approach since it wraps an a element and browsers and screen readers can verify that it's a link.

Hope this helps!