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

Haga lo que hicimos en aula

1 - Organizando íconos en las redes sociales

 <div class="presentacion__enlaces">
                    <h2 class="presentacion__enlaces__subtitulo">Accede a mis redes:</h2>
                 
                    <a class="presentacion__enlaces__link" href="https://github.com/">
                        <img src="./assets/github.png" alt="Icono de Github">
                        GitHub</a>
                    <a class="presentacion__enlaces__link" href="https://es.linkedin.com/">
                        <img src="./assets/linkedin.png" alt="Icono de LinkedIn">
                        LinkedIn</a>
                    <a class="presentacion__enlaces__link" href="https://www.twitch.tv/">
                        <img src="./assets/Twitch.png" alt="Icono de Twitch">
                       Twitch</a>
             </div>

2 - Centrando íconos y textos en los botones

.presentacion_enlace_link{

  display: flex;
  justify-content: center;
  gap: 16px;
}

3 - Espaciado entre íconos y textos

.presentacion_enlace_link{
  width: 280px;
  text-align: center; 
  padding: 21.5px 0px;
  border-radius: 8px; 
  font-family: var(--fuente-monserrat);
  font-size: 24px;
  font-weight: 600px;
  text-decoration: none;
  color: #f6f6f6;
  border: 2px solid #22D4fD;
  display: flex;
  justify-content: center;
  gap: 16px;
}

4 - Personalizando el efecto Hover

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

5 - Cambiando el cursor y el fondo de los botones

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

1 respuesta

Hola! ¿Cómo estás?

Gracias por compartir tu código con nosotros. Sigue así y no dudes en volver al foro si tienes

alguna pregunta o dificultad.

¡Gracias nuevamente!

Saludos,

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