Tengo muchos botones, con dos clases diferentes, los cuales tienen una transición que parte a través de separar el texto de los mismos letra por letra y colocar cada una en un span.
Para explicarlo mejor, tengo estos dostres botones:
<a href="#" class="button">Sign up</a>
<a href="#" class="button">Get started</a>
<a href="#" class="button2">Continue</a>
(function() {
var elems, button, i, span = "";
elems = document.querySelectorAll('.button').length;
for (j = 0; j < elems; j++)
{
button = document.querySelectorAll(".button")[j];
let span +== "<div>";
for (i = 0; i < button.innerText.length; i++)
{
span += "<span>";
if (button.innerText[i] !== " ")
{
span += button.innerText[i];
}
else
{
span += " ";
}
span += "</span>";
}
span += "</div>";
button.innerHTML = span;
}
}());
La idea es que cada botón tenga su texto aparte con el fin de poder hacer la transición que les comento, que de verdad no viene al caso acá ya que es por css y al tener ambos textos de los botones correctamente este funciona perfecto.
Tambien, el tercer botón que tiene el texto "Continue" y la clase "button2" lo necesito hacer con la misma función pero tampoco tengo la idea de como reutilizar el código para cualquier clase de botón que tengo en el proyecto.