A step-by-step guide to implementing this button using Tailwind CSS utility classes.
Basic HTML Structure
<a href="#" class="group inline-flex items-center gap-3 bg-black text-white font-semibold rounded-full py-3 px-6 pl-5 whitespace-nowrap overflow-hidden text-ellipsis transition-colors duration-300 hover:bg-white hover:text-black border border-black">
<span>Button Text</span>
<span class="relative flex-shrink-0 w-[25px] h-[25px] bg-white text-black rounded-full grid place-items-center overflow-hidden group-hover:bg-black group-hover:text-white transition-colors duration-300">
<svg viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-2.5 h-2.5 transition-transform duration-300 ease-in-out group-hover:translate-x-[150%] group-hover:-translate-y-[150%]">
<path d="M13.376 11.552l-.264-10.44-10.44-.24.024 2.28 6.96-.048L.2 12.56l1.488 1.488 9.432-9.432-.048 6.912 2.304.024z" fill="currentColor"></path>
</svg>
<svg viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-2.5 h-2.5 absolute -translate-x-[150%] translate-y-[150%] transition-transform duration-300 ease-in-out delay-100 group-hover:translate-x-0 group-hover:translate-y-0">
<path d="M13.376 11.552l-.264-10.44-10.44-.24.024 2.28 6.96-.048L.2 12.56l1.488 1.488 9.432-9.432-.048 6.912 2.304.024z" fill="currentColor"></path>
</svg>
</span>
</a>Button Container
Base styling for the button itself:
inline-flex items-center gap-3 bg-black text-white font-semibold rounded-full py-3 px-6 pl-5 whitespace-nowrap overflow-hidden transition-colors duration-300
Hover States
Color inversion on hover:
hover:bg-white hover:text-black
Icon Wrapper
Circular container for the icon:
relative flex-shrink-0 w-[25px] h-[25px] bg-white text-black rounded-full grid place-items-center overflow-hidden group-hover:bg-black group-hover:text-white
Icon Animation
First icon (exits on hover):
transition-transform duration-300 ease-in-out group-hover:translate-x-[150%] group-hover:-translate-y-[150%]
Second icon (enters on hover):
absolute -translate-x-[150%] translate-y-[150%] transition-transform duration-300 ease-in-out delay-100 group-hover:translate-x-0 group-hover:translate-y-0
Start with an anchor tag and add the necessary classes for styling the button container.
Add the group class to the button to enable targeting child elements on hover.
Add a span element with your button text within the anchor tag.
Add a circular span that will contain both icon SVGs, with proper sizing and colors.
Include two identical SVG icons, one visible by default and one hidden initially.
Position the icons and set up their hover animations using transform and transition classes.
Use the group and group-hover: modifiers for cleaner code.
Maintain consistent sizing of the button across different screen sizes with responsive utility classes.
Add focus: states for keyboard accessibility.
Keep transitions between 300-500ms for optimal user experience.
Use the delay-[ms] utility to create staggered animations.
Tailor the button to match your brand's aesthetic with these customization options.