Código HTML:

Este código HTML establece la estructura de la página, incluyendo un contenedor principal (.container), un encabezado con una imagen y un nombre, y un área para los botones de las redes sociales - "Instagram" y "GitHub".

Guilherme Dias

    <section class="social-links">
        <a href="https://www.instagram.com" class="button-link common-button">Instagram</a>
        <a href="https://www.github.com" class="button-link common-button">GitHub</a>
    </section>
</div>

Código CSS
Este archivo CSS, llamado style.css, contiene todas las reglas de estilo para los botones, incluyendo el espaciado, la visibilidad, la fuente, y el espaciado interno.

/* Estilos generales para el cuerpo y el contenedor */
body {
background-color: #f0f2f5;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}

.container {
background-color: #ffffff;
padding: 2rem;
border-radius: 1rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
text-align: center;
}

/* Estilos para la imagen y el nombre de perfil */
.profile-image {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 1rem;
}

.profile-name {
font-size: 1.5rem;
color: #333;
margin: 0 0 2rem 0;
}

/* 1 - Espaciado y tamaño de los botones /
.social-links {
display: flex;
flex-direction: column; / Apila los botones verticalmente /
gap: 1.5rem; / Espacio consistente entre los botones */
}

/* 3 - Creando una clase común para botones /
.common-button {
/ 5 - Importando y aplicando la fuente correcta */
font-family: 'Montserrat', sans-serif;
font-weight: 600;

/* 4 - Ajustando el espaciado interno de los botones */
padding: 1rem 2rem;

/* Estilos generales */
border-radius: 2rem;
text-decoration: none; /* Elimina el subrayado por defecto */
transition: background-color 0.3s ease, transform 0.2s ease;

}

/* 2 - Mejorando la visibilidad de los botones /
.button-link {
display: block;
font-size: 1.1rem;
color: #ffffff;
background-color: #4CAF50; / Color de fondo /
border: none;
cursor: pointer;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); / Sombra para mejor visibilidad */
}

/* Estilos para el hover y focus de los botones /
.button-link:hover, .button-link:focus {
background-color: #45a049;
transform: translateY(-2px); / Efecto de elevación */
}