Cómo crear un botón "Me gusta"

Cómo crear un botón “Me gusta”

Tutorial de microinteracciones para principiantes

Creo que es seguro decir que las microinteracciones son geniales. Los internautas los apreciamos universalmente. Y cuando crea un sitio web, pueden mejorar drásticamente la experiencia del usuario. No solo darán vida a su sitio web o herramienta web de una manera sutil y fácil de usar, sino que también ayudarán al usuario a disfrutar un poco más de toda la interacción.

Con eso en mente, quiero darte un tutorial rápido sobre microinteracciones y mostrarte cómo crear un botón “Me gusta” genial para tu sitio. Con código mínimo. Aquí está en acción:

Bastante emocionante para un botón de pulgar hacia arriba, ¿no? ¡Vamos!

Pero primero:

¿Por qué preocuparse por las microinteracciones en primer lugar?

No voy a intentar convencerte demasiado aquí, pero veamos algunas cosas.

Las microinteracciones han existido durante algún tiempo, lo suficiente como para que incluso tengan libros completos escrito sobre ellos. Además, muchos experimentos y estudios han examinado su utilidad y eficacia.

Una de las casas de investigación más notables, Nielsen Norman Group, ha investigado más las microinteracciones. de cerca en 2018. Según sus hallazgos, se ha demostrado que las microinteracciones, entre otras cosas, mejoran la experiencia del usuario al fomentar el compromiso y comunicar la marca.

En resumen, las microinteracciones pueden ser realmente beneficiosas si se usan correctamente y no demasiado. Hoy te mostramos un ejemplo sencillo de microinteracciones en acción:

Tutorial sobre microinteracciones: el marcado y CSS básico de nuestro botón “Me gusta”

💡 Nota; en la parte inferior tenemos algunas opciones para usted que no implican escribir código a mano.

En primer lugar, necesitamos algo de magia HTML y CSS para que esto funcione. La estructura es bastante simple.

Usaremos un SVG etiqueta para el icono como sí mismo – esto es de Fuente impresionante; puedes encontrar la mayoría de los iconos aquí. Solo para ajustar el ancho y la talla atributos de SVG etiqueta, usaremos el HTML a continuación:

<html>
  <body>
    <a href="https://www.codeinwp.com/blog/micro-interactions-tutorial/#" class="like-button">
      <svg width="20" height="20" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z"/></svg>
      </svg>
    </a>
  </body>
</html>

Ahora para el CSS, vamos a llegar a lo básico. Lo que queremos hacer aquí es hacer que nuestro botón Me gusta se vea bien y que todo esté centrado en la pantalla. Ya sabemos que vamos a alternar una clase con un clic (el active class), por lo que debemos tener esto en cuenta. Rellenaremos el icono con un color azul cuando esté activo y gris oscuro en caso contrario:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.like-button {
  display: flex;
  align-items: center;
  justify-content: center;
}

.like-button.active {
  -webkit-animation: pop 0.9s both;
  animation: pop 0.9s both;
}

.like-button svg {
  opacity: 1;
}

.like-button svg path {
  fill: #333;
  transition: fill .4s ease-out;
}

.like-button.active svg path {   
  fill: #2196f3;
}

Otra cosa que queremos aquí es el pop animación utilizada cuando el botón se activa, así que lo agregaremos a nuestro archivo CSS:

@-webkit-keyframes pop {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pop {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

Usted también puede estar interesado en:

La parte de “interacción” de este tutorial sobre microinteracciones

Ahora que nos hemos deshecho del estilo básico, es hora de lidiar con las interacciones reales, ¡eso significa JavaScript!

Primero, vamos a necesitar una función de JavaScript que genere un número entero aleatorio entre un intervalo dado (un mínimo y un máximo):

function randomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

A continuación, necesitaremos otra función que devuelva aleatoriamente +1 o -1 para que podamos tener valores aleatorios negativos o positivos:

function plusOrMinus() {
  return Math.random() < 0.5 ? -1 : 1;
}

Pasemos ahora a la gestión real de las interacciones; veamos el código para explicarlo correctamente:

  • Primero, guardaremos nuestro botón en una variable y le agregaremos un detector de eventos de clic.
  • Cuando se hace clic en el botón, agregaremos un preventDefault() funcionan para que podamos estar seguros de que no ocurre nada no deseado.
  • Después de eso agregaremos nuestro active class al botón, que previamente diseñamos con un color azul a través de CSS.
  • Entonces ejecutaremos el generateClones() función (que aún no está definida), pasando nuestro botón como parámetro a través de this.
let button = document.querySelector(".like-button");

button.addEventListener("click", function(e) {
  e.preventDefault();
  this.classList.toggle("active");
  generateClones(this);
});

Ahora definamos el generateClones() función y realice los siguientes pasos con él:

  1. Primero, decidamos sobre un número aleatorio de clones. Crearemos una instancia entre dos y cuatro clones para el icono. Usaremos el previamente definido randomInt() función.
  2. Luego, para cada clon usaremos el SVG etiqueta dentro de nuestro botón como “plantilla” y usa el cloneNode(true) Función de JavaScript para clonarlo en una nueva variable. También estableceremos un tamaño entre 5 y 16 para nuestro clon usando la función de generador de enteros aleatorios.
  3. A continuación, agregaremos nuestros clones al botón, estableceremos su ancho y alto con el número generado anteriormente y haremos su posición absoluta para que podamos moverlos independientemente del botón.
  4. Otra cosa que necesitamos es una transición para nuestros clones, para que no vengan a su nueva ubicación simplemente haciendo clic.
  5. Ahora, para agregar las transformaciones reales que moverán nuestro ícono, nos vamos a volver un poco locos. Queremos que nuestros clones se muevan desde el centro de nuestro botón hacia afuera al azar. Usando una combinación de nuestros randomInt() y plusOrMinus() funciones, vamos a mover nuestros clones en el eje XY con el translate3d Propiedad CSS. También usaremos un “truco”, ya que nuestra transición no se aplicaría de otra manera. Entonces, agregando un simple setTimeout() la función nos ayudará a lograr este objetivo. Al mismo tiempo, vamos a mover la opacidad a 0, haciendo desaparecer los clones.
  6. Eliminación de nuestros clones. Necesitamos limpiar el DOM una vez que hayamos terminado con todo el jazz. Entonces necesitamos otro setTimeout() que eliminará nuestros clones del DOM después de un segundo.
generateClones(button) {
  // 1. Generate clones and iterate over the set number
  let clones = randomInt(2, 4);
  for (let it = 1; it <= clones; it++) {
    // 2. Get the SVG tag clone in a variable and generate a random size
    let clone = button.querySelector("svg").cloneNode(true),
        size = randomInt(5, 16);
    // 3. Add our clone to the button and change its' width/height/position
    button.appendChild(clone);
    clone.setAttribute("width", size);
    clone.setAttribute("height", size);
    clone.style.position = "absolute";
    // 4. Add some flashy transitions
    clone.style.transition =
      "transform 0.5s cubic-bezier(0.12, 0.74, 0.58, 0.99) 0.3s, opacity 1s ease-out .5s";
    // 5. Animate our icon outwards with a setTimeout function so that CSS complies.
    let animTimeout = setTimeout(function() {
      clone.style.transform =
        "translate3d(" +
        plusOrMinus() * randomInt(10, 25) +
        "px," +
        plusOrMinus() * randomInt(10, 25) +
        "px,0)";
      clone.style.opacity = 0;
      clearTimeout(animTimeout);
    }, 1);
    // 6. Removing the clones after 0.9 seconds
    let removeNodeTimeout = setTimeout(function() {
      clone.parentNode.removeChild(clone);
      clearTimeout(removeNodeTimeout);
    }, 900);
  }
}

¡Es todo! ¡Lo logramos hasta el final! A continuación encontrará el ejemplo de CodePen:

Ver la pluma
Botón “me gusta
por Andrei Băicuș (@abaicus)
sobre CodePen.

¡Gracias por pasar por esto!

Otras opciones para agregar microinteracciones a WordPress

Si escribir código manualmente no es lo tuyo, en realidad hay un puñado de complementos de WordPress que puedes usar para obtener microinteracciones en tu sitio sin tener que preocuparte por cómo funciona todo bajo el capó.

En primer lugar, puede utilizar el ¡Anímalo! plugin para animar casi cualquier elemento en sus páginas usando CSS3.

Por ejemplo, puede agregar un botón o un fragmento de texto y luego configurarlo para que se anime de cierta manera cuando se hace clic.

Aquí hay un ejemplo de lo que puede hacer el complemento: video 📹.

Otro complemento, y uno de los favoritos de nuestro editor, es Códigos cortos definitivos.

Entre una multitud de códigos cortos diferentes, hay uno para animaciones simples. Hay algunos ajustes preestablecidos sobre cómo debe comportarse la animación, y puede poner prácticamente cualquier cosa que se animará dentro del bloque.

Aquí hay un ejemplo de un botón animado (nota: la animación solo funciona la primera vez que se desplaza por la ventana; si no lo ve, actualice la página):

Estos dos complementos deberían darte opciones más que suficientes para animar ciertos elementos de tus páginas y hacer que aparezcan un poco más cuando el usuario interactúe con ellos. Por supuesto, no quiere exagerar con estos, pero darle al usuario un impulso adicional al interactuar con su llamado a la acción clave puede ser muy útil.

¿Qué opinas de las microinteracciones? ¿Piensas seguir este tutorial sobre microinteracciones y agregar algo a tu sitio? Háznoslo saber en los comentarios.

No olvide unirse a nuestro curso intensivo sobre cómo acelerar su sitio de WordPress. Con algunas correcciones simples, puede reducir su tiempo de carga en un 50-80%:

O inicie la conversación en nuestro Grupo de Facebook para profesionales de WordPress. Encuentre respuestas, comparta consejos y obtenga ayuda de otros expertos en WordPress. Únase a él ahora es gratis)!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba