Бегущий пунктир

Пунктирная рамка бесконечно бежит по кнопке и разгоняется по ховеру.

Наведите на кнопки.

Код

<button class="ants">
  <svg><rect x="1" y="1" rx="14"/></svg>
  <span>Кнопка</span>
</button>

<style>
.ants { position: relative; background: none; border: none; }
.ants svg { position: absolute; inset: 0;
  width: 100%; height: 100%; fill: none; }
.ants rect { width: calc(100% - 2px); height: calc(100% - 2px);
  stroke: #101010; stroke-width: 1.6;
  stroke-dasharray: 7 7;                       /* пунктир */
  animation: march 14s linear infinite; }
.ants:hover rect { animation-duration: 2.2s; } /* разгон по ховеру */
@keyframes march { to { stroke-dashoffset: -280; } }
</style>

Промпт для ИИ

Сделай бегущий пунктир по рамке (marching ants): в элемент кладётся SVG с rect на весь размер (rx = скругление), stroke-dasharray 7 7, бесконечная анимация stroke-dashoffset (кратно сумме dasharray, чтобы цикл был бесшовным). Медленно в покое (14s), разгоняется по ховеру (2.2s). Подходит для кнопок, зон загрузки файлов, выделенных карточек.