I'll create a tertiary link button with the animated arrow effect you described. The black box will act as a mask, and on hover, the arrow will slide out to the right and reappear from the left.

How it works:

1. The Button Structure:

   • The button consists of a black box containing an arrow, followed by text
   • I've used the Lucide React ArrowRight icon for the arrow

2. The Animation:

   • The black box has overflow: hidden to create the mask effect
   • There are actually two arrows inside the box
   • On hover, the first arrow slides out to the right (150% translation)
   • Simultaneously, the second arrow (initially positioned off-screen to the left) slides in from the left

3. Implementation Details:

   • The component is fully responsive and accessible
   • It accepts all standard link props plus custom styling via className
   • The default text is "Learn more" but can be customized

You can customize the animation speed by adjusting the duration-300 class to a different value, or change the colors by modifying the background and text color classes.