1
.apresentacao__links {
display: flex;
gap: 20px;
justify-content: center;
}
.apresentacao__links__link {
width: 300px;
padding: 20px 0;
}
2
.apresentacao__links__link {
background-color: #22D4FD;
color: #000000;
font-size: 26px;
font-weight: 700;
border: 2px solid #ffffff;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
transition: all 0.3s ease;
}
.apresentacao__links__link:hover {
background-color: #1bb0d8;
color: #ffffff;
}
3
HTML:
<a class="botao" href="https://instagram.com/rafaballerini">Instagram</a>
<a class="botao" href="https://github.com/guilhermeonrails">GitHub</a>
CSS:
.botao {
background-color: #22D4FD;
color: #000000;
font-size: 24px;
font-weight: 600;
text-align: center;
border-radius: 16px;
width: 280px;
padding: 20px 0;
text-decoration: none;
display: inline-block;
}
4
.botao {
padding: 25px 0;
}
5
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap');
.botao {
font-family: "Montserrat", sans-serif;
font-weight: 600;
text-decoration: none;
color: #000000;
}