I've always loved how much polish a subtle animation like the one on this Stripe button can add to a UI ๐
Let me show you how to recreate it with Tailwind CSS! ๐งต
First, let's create the button! We'll use `rounded-full` for the pill shape, add padding with `px-4` and `py-1.5`, set the font-weight with `font-semibold`, add color with `text-white` and `bg-slate-900`, then set a hover color with `hover:bg-slate-700`.
play.tailwindcss.com/c1BKsSjQto
Next, let's figure out how this icon needs to be built to animate the way we want it to.
Here's what the animation looks in slow motion โ notice how the horizontal line fades in, and the chevron slides to the right?
To do this in our UI, we're going to need those two parts of the icon to be separate paths in the SVG.
I created two frames in Figma that were the same size, and drew these two pieces so I could export them separately:
We'll export these as SVG, then bring them into our code and combine them by just copying the `path` element from each one and pasting them into a single SVG with the same `viewBox`:
play.tailwindcss.com/dWScn3zw5O
(We'll fix the chevron placement soon!)
Next, let's slap that SVG into our button. I've added `inline-flex` and `items-center` to make them render side by side, then fine-tuned the icon placement with some margin classes on the <svg> itself.
I've commented out the horizontal line, since it's hidden by default.
Now let's animate it! Using the `group` variants in Tailwind, we can animate each part of the SVG whenever the whole button is hovered.
The line goes from `opacity-0` to `opacity-100`, and we translate the chevron right by 3px.
The real trick here is that each `<path>` element in an SVG is really just like any other element, and you can add classes to them just like you can with a `<div>` โ SVGs aren't a black box like a raster image. Pretty neat!
Here's what the finished result looks like:
play.tailwindcss.com/paQYuuU1JB
All achieved directly in the markup with utility classes ๐