Tried like this but it doesnt work,

"use client";
import HoverTextEffect from "./anims/Text";
import styles from "./css/Hero.module.css";
import { useRouter } from "next/navigation";

function Hero() {
  const router = useRouter();

  return (
    <div className={styles.Container}>
      <div className={styles.Blob}></div>
      <div className={styles.Buttons}>
        <button
          className={styles.ButtonOne}
          type="button"
          onClick={() => router.push("mailto:myemail@gmail.com")}
        >
          <HoverTextEffect>Contact</HoverTextEffect>
        </button>
      </div>
    </div>
  );
}

export default Hero;