export function SlideUnderlineButton() {
  return (
    <div className="bg-[#FAFAF8] p-12 grid place-items-center">
      <style>{`
        .underline-btn {
          position: relative;
          color: #111;
          font-family: var(--font-instrument-serif), serif;
          font-style: italic;
        }
        .underline-btn::before {
          content: "";
          position: absolute;
          left: 0;
          bottom: -4px;
          height: 2px;
          width: 100%;
          background: #111;
          transform: scaleX(0);
          transform-origin: 0% 50%;
          transition: transform .45s cubic-bezier(.2,.7,.2,1);
        }
        .underline-btn:hover::before { transform: scaleX(1); }
        .underline-btn:hover .arr { transform: translateX(4px); }
        .underline-btn .arr {
          display: inline-block;
          transition: transform .35s cubic-bezier(.2,.7,.2,1);
        }
      `}</style>
      <button
        type="button"
        className="underline-btn px-1 py-1 text-[22px]"
      >
        Read the essay <span className="arr">→</span>
      </button>
    </div>
  );
}
Slide Underline Button
