5 Tailwind1 with JSPublished 2026-10-05Free · no sign-up
Six buttons and links that draw lines with SVG strokes: a border that traces itself, a ring around a play button, a wavy underline, a tick that draws after saving, an arrow shaft that extends and a dashed border that marches.
An SVG rectangle traces itself around the button on hover and keyboard focus. pathLength="100" makes the dash maths independent of the button's size, so stroke-dasharray and stroke-dashoffset are simply 100.
A round play button whose ring draws clockwise from the top on hover or focus. The SVG is rotated -90 degrees so the stroke starts at twelve o'clock, and the button's accessible name comes from aria-label.
A link whose hand-drawn wavy underline draws itself from left to right on hover or focus. The wave is one SVG path made of repeated quadratic curves, stretched to the width of the link text.
After a click the button says Saved and a tick draws itself beside the word. A data attribute switches on group-data-[done] utilities, the drawing is a small keyframe animation, and a status message tells screen reader users the save worked.
@keyframes twss-draw { to { stroke-dashoffset: 0; } }
var b = document.getElementById('twss4'), t;
b.onclick = function () { b.dataset.done = ''; b.querySelector('span').textContent = 'Saved'; document.getElementById('twss4s').textContent = 'Changes saved'; clearTimeout(t); t = setTimeout(function () { delete b.dataset.done; b.querySelector('span').textContent = 'Save changes'; }, 2500); };
05. Tailwind Extending Arrow Link
TailwindSVGArrow
A text link whose arrow shaft grows out of the arrowhead on hover. The shaft is drawn from right to left, so a partial dash offset leaves a short stub next to the head that extends to full length.
A dashed outline whose dashes march around the button while it is hovered, like a selection marquee. A short keyframe moves stroke-dashoffset by one dash-and-gap, so the loop is seamless, and it only runs when motion is allowed.
@keyframes twss-march { to { stroke-dashoffset: -12; } }
About these Tailwind SVG Stroke Buttons
Dash offset draws the line
Set the dash array to the path's length and the offset to the same value, so the stroke is hidden; transitioning the offset to 0 draws it.
pathLength makes it size-proof
With pathLength="100" on the shape, the dash values are always 100, whatever the button's real size.
Arbitrary properties for SVG
Tailwind has stroke colour and width utilities; dash values come from arbitrary properties such as [stroke-dashoffset:100] and transition-[stroke-dashoffset].
Hover and focus together
Pair every group-hover: with group-focus-visible: so keyboard users see the same drawing.
Frequently asked questions
Are the SVGs read by screen readers?
No. They are aria-hidden decoration; the button text or aria-label carries the meaning.
Where do the keyframes go?
In your CSS file or tailwind.config, as shown in the CSS tab.