Hacer un botón de reproducción / pausa de CSS puro | Programar Plus

A nivel mundial, los iconos de control de medios son algunos de los lenguajes visuales más entendidos universalmente en cualquier tipo de interfaz. Un diseñador puede simplemente asumir que cada usuario no solo sabe ▶ ️ = jugar, sino que los usuarios buscarán el ícono para ver cualquier video o animación.

Según se informa, introducida en la década de 1960 por el ingeniero sueco Philip Olsson, la flecha de reproducción se diseñó primero para indicar la dirección en la que iría la cinta al leer en reproductores de cinta de carrete a carrete. Desde entonces, pasamos de casetes a CD, del iPod a Spotify, pero los iconos de los controles multimedia siguen siendo los mismos.

El ícono reproducir ▶ ️ es un símbolo estándar (con su propio Unicode) de iniciar un medio de audio / video junto con el resto de los símbolos como detener, pausar, avanzar rápido, rebobinar y otros.

Hay opciones unicode y emoji para los íconos de los botones de reproducción, pero si desea algo personalizado, puede buscar una fuente de ícono o un activo personalizado. Pero, ¿y si quieres cambiar entre los iconos? ¿Puede ese cambio ser suave? Una solución podría ser utilizar SVG. Pero, ¿y si pudiera hacerse en 10 líneas de CSS? Que lindo es eso

En este artículo, crearemos un botón de reproducción y un botón de pausa con CSS y luego exploraremos cómo podemos usar las transiciones de CSS para animar entre ellos.

Botón de play

Paso uno

Queremos lograr un triángulo que apunte a la derecha. Comencemos haciendo una caja con un borde grueso. Actualmente, las cajas son el método base preferido para hacer triángulos. Comenzaremos con un borde grueso y colores brillantes para ayudarnos a ver nuestros cambios.

<button class="button play"></button>
.button.play {
  width: 74px;
  height: 74px;
  border-style: solid;
  border-width: 37px;
  border-color: #202020;
}

Segundo paso

La reproducción de un borde de color sólido produce el resultado anterior. Escondido detrás del color del borde hay un pequeño truco ingenioso. ¿Cómo se representa exactamente el borde? Cambiemos los colores del borde, uno para cada lado, nos ayudará a ver cómo se renderiza el borde.

.button.play {
  ...
  border-width: 37px 37px 37px 37px;
  border-color: red blue green yellow;
}

Paso tres

En la intersección de cada borde, notará que se forma un ángulo de 45 grados. Esta es una forma interesante en que los bordes son renderizados por un navegador y, por lo tanto, abre la posibilidad de diferentes formas, como triángulos. Como veremos a continuación, si hacemos el border-left lo suficientemente ancho, ¡parece como si pudiéramos lograr un triángulo!

.button.play {
  ...
  border-width: 37px 0px 37px 74px;
  border-color: red blue green yellow;
}

Paso cuatro

Bueno, eso no funcionó como se esperaba. Es como si el cuadro interior (el div real) insistiera en mantener su ancho. La razón tiene que ver con el box-sizing propiedad, que por defecto tiene un valor de content-box. El valor content-box le dice al div que coloque cualquier borde en el exterior, aumentando el ancho o el alto.

Si cambiamos este valor a border-box, el borde se agrega al interior del cuadro.

.button.play {
  ...
  box-sizing: border-box;
  width: 74px;
  height: 74px;
  border-width: 37px 0px 37px 74px;
}

Último paso

Ahora tenemos un triángulo adecuado. A continuación, debemos deshacernos de la parte superior e inferior (rojo y verde). Hacemos esto configurando el border-color de esos lados a transparent. El ancho también nos da control sobre la forma y el tamaño del triángulo.

.button.play {
  ...
  border-color: transparent transparent transparent #202020;
}

Aquí hay una animación para explicar eso, si eso es útil.

Botón de pausa

Paso uno

Continuaremos haciendo nuestro símbolo de pausa comenzando con otro cuadro de borde grueso ya que el anterior funcionó tan bien.

<button class="button pause"></button>
.button.pause {
  width: 74px;
  height: 74px;
  border-style: solid;
  border-width: 37px;
  border-color: #202020;
}

Segundo paso

Esta vez usaremos otra propiedad CSS para lograr el resultado deseado de dos líneas paralelas. Cambiaremos el border-style a double. La propiedad doble en el estilo de borde es bastante sencilla, duplica el borde agregando un trazo transparente en el medio. El trazo o espacio vacío será el 33% del ancho del borde dado.

.button.pause {
  ...
  border-style: double;
  border-width: 0px 37px 0px 37px;
}

Último paso

Ahora coloque un lado del borde con el border-width propiedad. Utilizando el border-width es lo que hará que la transición funcione sin problemas en el siguiente paso.

.button.pause{
  ...
  border-width: 0px 0px 0px 37px;
  border-color: #202020;
}

Animando la transición

En los dos botones que creamos arriba, observe que hay muchas similitudes, pero dos diferencias: border-width y border-style. Si usamos transiciones CSS, podemos cambiar entre los dos símbolos. No hay efecto de transición para border-style pero border-width Funciona genial.

A pause El cambio de clase ahora se animará entre el estado de reproducción y pausa.

Aquí está el estilo final en SCSS:

.button {
  box-sizing: border-box;
  height: 74px;
  
  border-color: transparent transparent transparent #202020;
  transition: 100ms all ease;
  will-change: border-width;
  cursor: pointer;

  // play state
  border-style: solid;
  border-width: 37px 0 37px 60px;

  // paused state
  &.pause {
    border-style: double;
    border-width: 0px 0 0px 60px;
  }
}

Manifestación

Vea la transición del botón del lápiz con bordes de Chris Coyier (@chriscoyier) en CodePen.

Alternar sin JavaScript

Con un botón de reproducción / pausa del mundo real, es casi seguro que usará JavaScript para alternar el estado del botón. Pero es interesante saber que hay una forma CSS de hacerlo, utilizando una entrada y una etiqueta: el truco de la casilla de verificación.

<div class="play-pause">
  <input type="checkbox" value="" id="playPauseCheckbox" name="playPauseCheckbox" />
  <label for="playPauseCheckbox"></label>
</div>
.playpause {
  label {
    display: block;
    box-sizing: border-box;
    
    width: 0;
    height: 74px;
    
    cursor: pointer;

    border-color: transparent transparent transparent #202020;
    transition: 100ms all ease;
    will-change: border-width;
    
    // paused state
    border-style: double;
    border-width: 0px 0 0px 60px;
  }
  input[type="checkbox"] {
    visibility: hidden;
    
    &:checked + label {
      // play state
      border-style: solid;
      border-width: 37px 0 37px 60px;
    }
  }
}

Manifestación

Vea el botón de alternancia de lápiz con casilla de verificación de Chris Coyier (@chriscoyier) en CodePen.

Me encantaría conocer tu opinión y tus comentarios. Añádalos en los comentarios a continuación.