Hola Oliver, espero que estés bien
Parece que estás trabajando en un proyecto donde necesitas ajustar el espaciado y el tamaño de los botones usando Flexbox, además de mejorar su visibilidad. Aquí tienes algunas sugerencias que podrían ayudarte a cumplir con los objetivos de la actividad:
Espaciado y tamaño de los botones: Veo que ya estás usando justify-content: space-between;
para distribuir los botones uniformemente dentro del contenedor. Si necesitas ajustar el espaciado entre los botones, puedes considerar agregar márgenes a las clases de los enlaces. Por ejemplo:
.presentacion__enlaces__link {
margin: 0 10px; /* Ajusta el valor según sea necesario */
}
Visibilidad de los botones: Para mejorar la visibilidad, podrías aumentar el tamaño de la fuente y cambiar el color de fondo o del texto. También puedes agregar sombras o bordes. Aquí tienes un ejemplo:
.presentacion__enlaces__link {
font-size: 26px; /* Aumenta el tamaño de la fuente */
background-color: #1A9CFC; /* Cambia el color de fondo */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Agrega una sombra */
border: 2px solid #ffffff; /* Agrega un borde blanco */
}
Clase común para los botones: Si deseas crear una clase común para los botones, asegúrate de que incluya todas las propiedades de estilo que quieres aplicar a ambos botones. Por ejemplo:
.boton-comun {
width: 280px;
background-color: #22D4FD;
text-align: center;
padding: 21.5px 0;
border-radius: 16px;
font-family: "Montserrat", sans-serif;
font-size: 24px;
font-weight: 600;
text-decoration: none;
color: #000000;
}
Luego, aplica esta clase a ambos enlaces:
<a class="boton-comun" href="https://instagram.com/">Instagram</a>
<a class="boton-comun" href="https://github.com/">GitHub</a>
Espaciado interno de los botones: Si necesitas ajustar el espaciado interno, puedes modificar el padding
. Asegúrate de que el espaciado se vea bien visualmente y sea consistente con el diseño.
Espero que estas sugerencias te sean útiles. ¡Bons estudios!