1
resposta

Como vamos fazer o link das redes sociais parecer um botão?

Por favor, poderiam me ajudar a fazer o link das redes sociais parecerem um botão? Também gostaria de ajuda para diminuir a minha foto no Figma.

Segue o meu site: file:///C:/Users/Usu%C3%A1rio/Desktop/Portf%C3%B3lio/index.html

Acho que assim vocês não conseguem ver porque está só na minha máquina, certo?

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Gostaria de trazer mais para cima esses links e não, que ficasse no final da página.

No css, fiz dessa forma:

body {
    background-color: #000; 
    color: #f6f6f6;
    
    h1{
        front-weight: bold;
    }
}

strong {
    color: #1f8a70; 
}

span{
    color:#f6f6f6;
    border: 1px solid #f6f6f6;
    padding: 10px;
}

No html desta:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header></header>
<main>
    <h1>Eleve seu negócio digital a outro nível <strong>com um Front-end de qualidade!</strong></h1>
    <p>Olá! Sou Cleverson Lima Mota, estudante de análise e desenvolvimento de sistemas com mais de 
        <strong>dez anos de experiência na área financeira.</strong> 
        Vamos conversar?</p>
        <a href="https://instagram.com/cleversonlimamota"><span>Instagram</span></a>
        <a href="https://linkedin.com/in/cleversonlimamota">Linkedin</a>
        <img src="Cleversonn.png" alt="Foto de Cleverson">
</main>
<footer></footer>
</body>
</html>
1 resposta

Olá, Cleverson! Tudo bem?

Para fazer o link das redes sociais parecerem um botão, você pode utilizar CSS para estilizar os links como botões. Uma forma simples de fazer isso é utilizando a tag <a> e aplicando estilos CSS para deixá-la com a aparência de um botão.

Você pode adicionar uma classe aos seus links das redes sociais e, em seguida, estilizá-los no seu arquivo CSS. Por exemplo, você pode adicionar a classe "botao" aos seus links do Instagram e do Linkedin da seguinte forma:

<a href="https://instagram.com/cleversonlimamota" class="botao"><span>Instagram</span></a>
<a href="https://linkedin.com/in/cleversonlimamota" class="botao">Linkedin</a>

Em seguida, no seu arquivo CSS, você pode adicionar estilos para a classe "botao" da seguinte forma:

.botao {
  display: inline-block;
  padding: 10px 20px;
  background-color: #1f8a70;
  color: #f6f6f6;
  border-radius: 5px;
  text-decoration: none;
}

.botao:hover {
  background-color: #22D4FD;
}

Esses estilos irão definir o tamanho do botão, a cor de fundo, a cor do texto, a borda arredondada e a remoção do sublinhado do link. O efeito de hover também irá alterar a cor de fundo quando o mouse passar por cima do botão.

Quanto à diminuição da sua foto no Figma, você pode utilizar as ferramentas de edição de imagem do próprio Figma para ajustar o tamanho da imagem. Basta selecionar a imagem e redimensioná-la conforme necessário.

Espero ter ajudado!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!