Fill Sweep Button

An outline button that fills from the left on hover while its arrow nudges forward. Has a Tailwind version.

Original
No JS
Reduced-motion ready
Customisable
747 B gzip

An original by PasteMotion · MIT License

WidthFull

Code

index.html

<button class="fill-sweep-button" type="button">
  <span class="fill-sweep-button__label">Get started</span>
  <svg class="fill-sweep-button__icon" viewBox="0 0 20 20" width="18" height="18" aria-hidden="true">
    <path d="M4 10h11m-4-5 5 5-5 5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
  </svg>
</button>

How to use it

Paste the HTML where the animation should appear.
Add the CSS to your stylesheet. Every class starts with the animation's name, so it won't clash with yours.
Adjust the custom properties (--accent, --color-2, --speed) on .fill-sweep-button to restyle it without touching the rest.
Reduced-motion users are covered: the animation calms down or stops when that setting is on.