Эффект бесконечной бегущей строки

Question

<a href="#" class="btn btn-primary hero-btn">
  <span>Button</span>
</a>

Подскажите, возможно ли реализовать эффект бесконечной бегущей строки (чтобы текст циклично ездил по горизонтали) внутри кнопки. Необходимо избавиться от пустого места и занять его текстом кнопки, чтобы была видна не одна надпись "Button", а много Если да, то подскажите где посмотреть пример, или покажите Ваше решение, спасибо!

Answer 1

Уже лет 20 существует такой элемент как marquee:

marquee {
  width: 200px;
  border: 1px solid blue;
}

<marquee>Button</marquee>

Но надо следить, когда он перестанет поддерживаться браузерами, т.к. он уже помечен как Deprecated. Но это длится уже давно))

Answer 2

Если делать без скриптов, то как вариант, воспользуйтесь псевдоэлементами и data-атрибутом, где впишите нужный текст. По умолчанию ширина кнопки зависит от длины строки, поэтому желательно адекватное количество символов.

[data-txt] {
  position: relative;
  display: inline-block;
  overflow: hidden;
  white-space: pre;
  text-decoration: none;
}
[data-txt]::before {
  content: attr(data-txt) attr(data-txt);
  position: absolute;
  left: 0;
  width: min-content;
  animation: run 3s linear infinite;
}
[data-txt]::after { /* Ширина по умолчанию */
  content: attr(data-txt);
  width: min-content;
  visibility: hidden;
}
@keyframes run { to { transform: translatex(-50%) } }

.btn { /* Необязательная стилизация */
  display: inline-block;
  padding: 4px;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px #f00;
}
.btn:last-of-type [data-txt] {
  width: 280px;
  font: bold 24px 'Comic Sans MS';
}

<a href="#" class="btn btn-primary hero-btn"><span data-txt="Button "></span></a><br>
<a href="#" class="btn btn-primary hero-btn"><span data-txt="A"></span></a><br>
<a href="#" class="btn btn-primary hero-btn"><span data-txt="О-о-очень длинный текст. "></span></a><br>
<a href="#" class="btn btn-primary hero-btn"><span data-txt="font: bold 24px 'Comic Sans MS' "></span></a>

Есть два "минуса" такого подхода: 1) ширина кнопки должна быть равной или меньше, чем количество текста; 2) зависимость скорости анимации от пропорций кнопки и текста.

БЛОГ НА HUSL

Эффект бесконечной бегущей строки

Ответы (2 шт):