Implementación del Botón Interactivo

Este artículo explica cómo crear un botón de "Me Gusta" con una animación de corazón fluida y atractiva utilizando CSS puro. Se emplean pseudo-elementos, transformaciones y animaciones para lograr el efecto.

Conceptos Clave

• Uso de :before y :after para formar la forma del corazón.
• Aplicación de transform para rotaciones y escalas.
• Animaciones con @keyframes y animation para el efecto de rebote y partículas.

Estructura HTML

Se utiliza un label que contiene un checkbox oculto, seguido de dos divs: uno para la forma del corazón y otro para las partículas animadas.

<label class="contenedor-corazon">
  <input type="checkbox" class="checkbox-corazon" />
  <div class="forma-corazon"></div>
  <div class="particulas-corazon"></div>
</label>

Estilos CSS

El CSS define el corazón mediante pseudo-elementos con bordes redondeados y rotaciones. Al marcar el checkbox, se activa una animación de escala en el corrazón y una animación de expansión en las partículas.

.contenedor-corazon {
  width: 100px;
  height: 100px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.checkbox-corazon {
  display: none;
}

.forma-corazon {
  width: 60px;
  height: 56px;
  position: relative;
}

.forma-corazon:before, .forma-corazon:after {
  content: "";
  position: absolute;
  left: 8px;
  width: 30px;
  height: 50px;
  background-color: #666666;
  border-radius: 30px 30px 0 0;
  transform: rotate(-45deg);
  transition: all 0.4s;
}

.forma-corazon:before {
  left: 23px;
  transform: rotate(45deg);
}

.particulas-corazon {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: transparent;
  border-radius: 50%;
  box-shadow: 
    0 40px 0 -4px #ff0000,
    40px 0 0 -4px #ff0000,
    0 -40px 0 -4px #ff0000,
    -40px 0 0 -4px #ff0000,
    -24px 24px 0 -4px #ff0000,
    -30px -30px 0 -4px #ff0000,
    30px -30px 0 -4px #ff0000,
    24px 24px 0 -4px #ff0000;
  opacity: 0;
}

.checkbox-corazon:checked + .forma-corazon:before, .checkbox-corazon:checked + .forma-corazon:after {
  background-color: #ff0000;
}

.checkbox-corazon:checked + .forma-corazon {
  animation: animacion-corazon 0.4s ease-out forwards;
}

.checkbox-corazon:checked ~ .particulas-corazon {
  animation: animacion-particulas 1s ease-out forwards;
}

@keyframes animacion-corazon {
  50% {
    transform: scaleY(0.6);
  }
  100% {
    transform: scaleY(1);
  }
}

@keyframes animacion-particulas {
  0% {
    transform: scale(0);
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

Funcionamiento

Al hacer clic, el checkbox se marca, activando las animaciones. La forma del corazón se escala verticalmente para dar un efecto de rebote, mientras que las partículas se expanden y desvanecen, simulando un efecto de chispas. Este diseño es ideal para interacciones en listas de artículos o páginas de detalle, donde se busca una experiencia visual dinámica.