Recreación del efecto de botón deslizante Neat-o de Netlify | Programar Plus

¿Has visto la página de prensa de Netlify? Es uno de esos lugares donde puede descargar el logotipo de la empresa. Lo estaba buscando esta mañana porque necesitaba el logotipo para usarlo como imagen destacada para una publicación aquí en CSS-Tricks.

Bueno, noté que tienen estos bonitos botones para descargar el logo. Son pequeños y afilados. Llaman la atención pero no estorban.

¡También son interactivos! Mire la forma en que se expanden y revelan la palabra “Descargar” al pasar el mouse.

Bien, ¿verdad? De hecho, noté que se veían un poco fuera de lugar en Safari.

Eso me hizo sentir curiosidad por saber cómo se hacen. Entonces, los recreé aquí como una demostración mientras limpiaba algunas de las cosas de espaciado:

Ver la pluma
Botones deslizantes Netlify de Geoff Graham (@geoffgraham)
en CodePen.

¿Cómo lo hicieron? La receta realmente se reduce a cuatro ingredientes:

• Utilizando el left propiedad para deslizar la etiqueta “Descargar” dentro y fuera de la vista
• Utilizando padding en el estado de desplazamiento del botón para crear espacio adicional para mostrar la etiqueta “Descargar” al desplazar el cursor
• Declarando un 1: 1 scale() en el estado de desplazamiento del botón para que todo el contenido permanezca contenido cuando las cosas se muevan.
• Especificando un transition en el botón padding, el background-position del icono del botón y el transform propiedad para crear una animación suave entre los estados predeterminado y de desplazamiento del botón.

Así es como se ve sin todos los estilos de presentación:

Ver la pluma
Botones deslizantes Netlify sin estilo de Geoff Graham (@geoffgraham)
en CodePen.

Si tiene dificultades para visualizar lo que está sucediendo, aquí hay una ilustración que muestra cómo la etiqueta “Descargar” está oculta fuera del botón (gracias a overflow: hidden) y dónde se muestra al pasar el mouse.

Entonces, al poner negativo left valores en el icono y en la etiqueta “Descargar”, los sacamos de la vista y luego los restablecemos a valores positivos cuando se coloca el botón completo.

/* Natural State */
.button {
    background: 
      #f6bc00 
      url(data:image/svg+xml;base64,...)
      no-repeat -12px center;
    overflow: hidden;
}
  
.button span:nth-child(1) {
  position: absolute;
  left: -70px;
}

/* Hovered State */
.button:hover {
  padding-left: 95px;
  background-position: 5px center;
}

.button span:nth-child(1) {
  position: absolute;
  left: -70px;
}

Tenga en cuenta que dejar las cosas en este estado dejaría que el icono del botón se deslizara a la vista y creara suficiente espacio para la etiqueta “Descargar”, pero la etiqueta en realidad flotaría fuera del botón al pasar el mouse.

Ver la pluma
Botones deslizantes Netlify sin estilo de Geoff Graham (@geoffgraham)
en CodePen.

Ahí es donde agregar una escala de 1: 1 en el botón ayuda a mantener las cosas intactas.

* Hovered State */
.button:hover {
  padding-left: 95px;
  background-position: 5px center;
  transform: scale(1, 1);
}

Esos valores de relleno son números mágicos. Serán diferentes para usted según la fuente, el tamaño de la fuente y otros factores, por lo que su millaje puede variar.

El último ingrediente central es el transition propiedad, que hace que todo se deslice suavemente en su lugar en lugar de dejar que se rompan. Proporciona una experiencia mucho mejor.

/* Natural State */
.button {
    background: 
      #f6bc00 
      url(data:image/svg+xml;base64,...)
      no-repeat -12px center;
    overflow: hidden;
    transition: padding .2s ease, background-position .2s ease, transform .5s ease;
}

Agregue algunas pequeñas florituras, como esquinas redondeadas y demás, y obtendrá un botón bastante hábil.

Ver la pluma
Botones deslizantes Netlify de Geoff Graham (@geoffgraham)
en CodePen.