LinkedIn
Twitch
.apresentacao__links__link {
display: flex; /* Alinha ícone e texto */
align-items: center; /* Centraliza verticalmente */
justify-content: center; /* Centraliza horizontalmente */
gap: 16px; /* Espaçamento entre ícone e texto */
text-decoration: none; /* Remove o sublinhado dos links */
color: #F6F6F6; /* Cor do texto */
background-color: #000000; /* Fundo inicial preto */
padding: 12px 24px; /* Espaçamento interno */
border: 2px solid transparent; /* Borda inicial transparente */
border-radius: 12px; /* Cantos arredondados */
transition: all 0.3s ease-in-out; /* Animação fluida */
}
Espaçamento entre ícones e textos
Já resolvemos com o gap: 16px, mas a ideia é verificar o design no Figma e ajustar se necessário. O gap pode ser incrementado, por exemplo, para 24px, caso o design peça mais espaço.
.apresentacao__links__link:hover { border: 2px solid #0000FF; /* Muda para uma borda azul / background-color: #272727; / Fundo preto mais claro / box-shadow: 0 0 12px 4px rgba(0, 0, 255, 0.5); / Adiciona um brilho azul / transform: scale(1.05); / Aumenta levemente o tamanho do botão / cursor: pointer; / Altera o cursor / transition: all 0.3s ease-in-out; / Efeito suave / } .apresentacao__links__link:active { transform: scale(0.95); / Leve redução ao clicar / background-color: #1C1C1C; / Fundo mais escuro ao pressionar / box-shadow: 0 0 8px 2px rgba(0, 0, 255, 0.3); / Reduz o brilho / } .apresentacao__links__link { opacity: 0; / Inicialmente invisível / transform: translateY(20px); / Deslocado para baixo / animation: fadeIn 1s forwards ease-in-out; / Animação ao carregar */ }
@keyframes fadeIn { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
