Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Desafio: hover

Saludos, comparto mi css para los hovers de los botones de mis redes sociales.

.contenido__descripcion__btn__style{
  width: 378px;
  background-color: #000000;
  font-size: 24px;
  border-radius: 8px;
  padding: 16px 0;
  font-family: "Montserrat", sans-serif;
  font-size: 24px;
  font-weight: 600;
  border: 2px solid #22D4FD;
  display: flex;
  justify-content: center;
  gap: 16px;
  text-decoration: none;
  color: #f6f6f6;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.contenido__descripcion__btn__subtitulo{
  font-size: 24px;
  font-family: "Krona One", sans-serif;
  font-weight: 100;
}

.contenido__descripcion__btn__style:hover {
  color: #fff; /* color de fuente hover */
}
.contenido__descripcion__btn__style::after {
  content: "";
  background: #4741d7; /* color de fondo hover */
  position: absolute;
  z-index: -1;
  padding: 16px 20px;
  display: block;
  top: 0;
  bottom: 0;
  left: 100%;
  right: -100%;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}
.contenido__descripcion__btn__style:hover::after {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}
1 respuesta

Hola, Alejandro,

Gracias por compartir tu experiencia con nosotros. Recuerda que estamos aquí para ayudarte. Si necesitas más ayuda, no dudes en buscarnos en el foro.

¡Gracias nuevamente!

Saludos,

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios!