Hover..

1. HTML – Agregar LinkedIn y Twitch con íconos

Dentro del mismo contenedor de enlaces, agrega dos más. (Ajusta las rutas de las imágenes si tus archivos tienen otro nombre.)

GitHub

LinkedIn

Twitch

Nota: añadí ambas clases (presentacion__… y apresentacao__…) en los enlaces para evitar el desface de nombres. Si prefieres, unifica a una sola (la que uses en tu CSS).

1. CSS – Centrar ícono y texto dentro del botón (Flexbox)

En tu style.css, localiza la clase .apresentacao__enlaces__link y agrega estas propiedades (en este orden).

Puedes duplicar el selector para cubrir ambos nombres de clase si aún tienes mezcla de idiomas.

/* Si tienes mezcla de clases, usa ambos selectores /
.apresentacao__enlaces__link,
.presentacion__enlaces__link {
display: flex;
justify-content: center;
gap: 16px; / Punto 3: cambia este valor según Figma /
/ Recomendado para centrar verticalmente también: */
align-items: center;
}

/* Tamaño consistente de los íconos dentro de los botones */
.apresentacao__enlaces__link img,
.presentacion__enlaces__link img {
width: 24px;
height: 24px;
object-fit: contain;
}

1. CSS – Espaciado entre ícono y texto (gap)

Si en Figma el espaciado es, por ejemplo, 12px o 20px, reemplaza el 16px anterior por ese valor:

.apresentacao__enlaces__link,
.presentacion__enlaces__link {
display: flex;
justify-content: center;
gap: 20px; /* <— cambia aquí al valor exacto de Figma */
align-items: center;
}

1. CSS – Hover con borde azul
   .apresentacao__enlaces__link:hover,
   .presentacion__enlaces__link:hover {
   border-color: #0000FF; /* azul */
   }

(Si aún no tienes borde definido en el estilo base del botón, añádelo fuera del :hover, por ejemplo border: 2px solid #22D4FD; y aquí solo cambias el color.)

1. CSS – Cursor “pointer” y fondo #272727 al hacer hover
   .apresentacao__enlaces__link:hover,
   .presentacion__enlaces__link:hover {
   cursor: pointer;
   background-color: #272727;
   border-color: #0000FF; /* mantiene el requisito del punto 4 */
   }

(Opcional) Estilo base recomendado para los botones

Si aún no lo tienes, un estilo mínimo y accesible:

.apresentacao__enlaces__link,
.presentacion__enlaces__link {
text-decoration: none;
color: #F6F6F6;
background-color: transparent;
border: 2px solid #22D4FD;
border-radius: 8px;
padding: 12px 20px;
font: 600 16px/1.2 'Montserrat', sans-serif;
transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.apresentacao__enlaces__link:hover,
.presentacion__enlaces__link:hover {
cursor: pointer;
background-color: #272727;
border-color: #0000FF;
transform: translateY(-1px);
}

.apresentacao__enlaces__link:focus-visible,
.presentacion__enlaces__link:focus-visible {
outline: 3px solid #22D4FD;
outline-offset: 2px;
}

Con esto ya tienes:

Los tres botones con ícono + texto.

Centrado interno con Flexbox.

Espaciado (gap) según Figma.

Hover con borde azul, fondo #272727 y cursor pointer.

Accesibilidad básica con :focus-visible.